css label 居中布局_详解 CSS 居中布局技巧
水平居中元素:通用方法,元素的宽高未知
方式一:CSS3 transform
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
方式二:Flex 布局
.parent {
display: flex;
justify-content: center;
}
适用于子元素为浮动,绝对定位,内联元素,均可水平居中。居中的元素为常规文档流中的内联元素(display: inline)
常见的内联元素有:span, a, img, input, label 等等
.parent {
text-align: center;
}
此方法同样适用于 display: inline-block 的元素。
居中的元素为常规文档流中的块元素(display: block)
常见的块元素:div, h1~h6, table, p, ul, li 等等
方式一:设置 margin
.parent {
width: 100%;
}
.child {
width: 600px;
height: 50px;
margin: 0 auto;
background: #999;
}
此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效。
方式二:修改为 inline-block 属性
.parent {
text-align: center;
}
.child {
display: inline-block;
}居中的元素为浮动元素
.child {
width: 100px;
float: left;
position: relative;
left: 50%;
margin-left: -50px;
}居中的元素为绝对定位元素
方式一:
.parent {
position: relative;
}
.child {
position: absolute;
width: 100px;
left: 50%;
margin-left: -50px;
}
方式二:
.parent {
position: relative;
}
.child {
position: absolute;
width: 100px;
left: 0;
right: 0;
margin: 0 auto;
}
垂直居中元素:通用方法,元素的宽高未知
方式一:CSS3 transform
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
方式二:Flex 布局
.parent {
display: flex;
align-items: center;
}
适用于子元素为浮动,绝对定位,内联元素,均可垂直居中。居中元素为单行文本
.text {
line-height: 200px;
height: 200px;
}
把文字的 line-height 设为文字父容器的高度,适用于只有一行文字的情况。已知元素宽高
方式一:
.parent {
position: relative;
}
.child{
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
方式二:
.parent {
position: relative;
}
.child{
position: absolute;
top: 0;
bottom: 0;
height: 100px;
margin: auto 0;
}
垂直居中元素:1. 绝对居中定位
div {
width: 100px;
height: 100px;
margin: auto;
position: fixed;
//absolute is ok
top: 0;
right: 0;
bottom: 0;
left: 0;
}
优点:
不仅可以实现在正中间,还可以在正左方,正右方
元素的宽高支持百分比 % 属性值和 min-/max- 属性
可以封装为一个公共类,可做弹出层
浏览器支持性好2. 负边距居中
.child {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
特点:良好的跨浏览器特性,兼容 IE6 - IE7
灵活性差,不能自适应,宽高不支持百分比尺寸和 min-/max- 属性3. Transform 定位
.child {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
特点:内容可自适应,可以封装为一个公共类,可做弹出层
可能干扰其他 transform 效果4. Flexbox 布局
.parent {
display: flex;
justify-content: center;
align-items: center;
}这是 CSS 布局未来的趋势。Flexbox 是 CSS3 新增属性,设计初衷是为了解决像垂直居中这样的常见布局问题。5. table-cell 居中
.parent {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 200px;
height: 200px;
border: 1px solid red;
}
.child {
width: 100px;
height: 100px;
display: inline-block;
background-color: #03f;
}
适用于子元素 display 为 inline-block, inline 类型的元素,需要已知父元素的宽高,且父元素的宽高不能设为百分比数。6. font-size 配合 vertical-align 实现垂直居中
.parent {
font-size: 175.4px;
height: 200px;
text-align: center;
}
.child {
vertical-align: middle;
display: inline-block;
font-size: 12px;
width: 50px;
height: 50px;
background-color: #00f;
}
该方法的要点是给父元素设一个合适的 font-size 的值,这个值的取值为该父元素的高度除以 1.14 得到的值,并且子元素必须 是一个 inline 或 inline-block 元素,需要加上 vertical-align: middle 属性。使用这种方法,子元素的宽度或高度都不必知道。
具体原理可以上网搜 vertical-align 垂直居中。7. 文本内容居中
text {
height: 100px;
line-height: 100px;
text-align: center;
}
css label 居中布局_详解 CSS 居中布局技巧相关推荐
- css设置元素继承父元素宽度_详解CSS中的百分比的应用
前言 百分比的应用随处可见,但是就一直没有机会去好好总结一下,如今项目中遇到的坑都是当年留的泪,在月底之前终于把这个好久想总结的文章给写完了. 1.使用百分比的场合 在目前项目中,最常用百分比的莫过于 ...
- css行高包含哪些,详解CSS行高
"行高"即CSS中line-height所描述的属性,它表示两行文字间基线之间的距离,不允许使用负值.在弄清行高之前,我们先来了解几个概念: 顶线.中线.基线.底线 上图所示线条从 ...
- gdb x命令_详解gdb的使用技巧
点击蓝字,关注我们 01 概念 GDB是一个由GNU开源组织发布的.UNIX/LINUX操作系统下的.基于命令行的.功能强大的程序调试工具. 在实际应用中,有两种调试方法:在线调试和离线调试. 离线调 ...
- html css主题,HTML+CSS=无限可能——案例详解:我的POI主题作品
原标题:HTML+CSS=无限可能--案例详解:我的POI主题作品 在微博发了这个作业,收到很多好评,实在太开心! 斌叔让我来投稿,那今天就以这个网页为案例,把制作过程中我的方法和经验分享给大家. 作 ...
- float属性html,详解CSS样式中的float属性
详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的fl ...
- css中float详解,CSS浮动属性Float详解?史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
- 详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范 一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...
- inline-block是html5,详解CSS display:inline-block的应用
本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解. 基础知识 display:inline- ...
- 详解CSS display:inline-block的应用(转)
详解CSS display:inline-block的应用 阅读目录 基础知识 inline-block的问题 inline-block的应用 总结 本文详细描述了display:inline-blo ...
最新文章
- 法院判决:优步无罪,无人车安全员可能面临过失杀人控诉
- hadoop商业版本选择对比
- 如何更好的解决问题 : The puzzle of die
- 新书上市:《FLUENT 14.0超级学习手册》
- Android studio 报错AAPT2 error
- 各主流浏览器内核介绍
- [js] 说说你对js沙箱的理解,它有什么应用场景?
- 帆软单点登录_电子表格FineReport教程:[20]CAS单点登录
- python vbs库_Python语言之requests库
- Apache2.4.29+Tomcat 8.5.29负载均衡群集最强解析
- ssis for循环容器_SSIS包中的序列容器
- linux下 环境搭建教程,Linux环境下搭建pNFS使用环境教程
- Phalanger 【Php on .net】
- 【泡泡Docker乐园】使用泡泡Docker基础镜像放心大胆地开发吧!
- win10 下mysql环境变量配置
- 2017 ACM-ICPC 青岛站 总结
- VM-CentOS7.6-启动时assuming drive cache:write through
- 小米手机v3.exo 合并_eXo Platform 3.0访谈
- 云计算基础(二)—— 虚拟化
- 阿里数据仓库架构与模型设计
热门文章
- linux的rootkit工具包,Linux下rootkit后门检测工具chkrootkit
- android 打开免打扰模式_「每日一个手机小技巧」手机飞行模式原来有着这么重要的作用...
- 区块链的技术简史与未来前景,从互联网进化角度分析
- java jsonarray 包,JSONObject与JSONArray的使用
- SimMIM:一种更简单的MIM方法
- PHP imagecreate - 生成自定义图片
- Fidder显示抓取IP地址
- 聊一聊ChatGPT
- Google Play 开发者账户被封 如何改代码快速上架
- 暴走恭亲王宣布成立EOS.CYBEX社区,加入EOS超级节点竞选