CSS水平居中、垂直居中、水平垂直居中方法总结
文字的水平居中:
text-align:center;
单行文字的垂直居中:
line-height:30px;
height:30px;
让有宽度的div水平居中:
margin: 0 auto;
width:300px;//必须要有宽度,margin:0 auto才能让它居中
让绝对定位的div垂直居中:
position:absolute;
top:0;
bottom:0;
margin:auto 0; //垂直方向的auto 发挥的作用
width:300px;
height:300px;
同理,让绝对定位的div水平和垂直方向都居中:
position:absolute;
top:0;
left: 0;
right:0;
bottom:0;
margin:auto;
width:300px;
height:300px;
已知宽高的容器的水平垂直方向居中:
width: 300px;
height:300px;
position: absolute;
top:50%;
left:50%;
margin-top: -150px; //自身高度的一半
margin-left:-150px;
未知宽高的容器的水平垂直方向居中:
width:300px;
height:300px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
*注:transform属性,低版本浏览器不兼容,例如IE8
水平垂直居中记得要想到flexbox:
.container{
display: flex;
align-items: center;
justify-content: center;
}
.container .div{
//whatever
}
此时.div无论是否已知宽高,都能两个方向居中。
垂直居中(表格布局法)
.container{
display: table;
}
.container .div{
display: table-cell;
vertical-align:middle;
}
为什么height=line-height就能垂直居中?
拜读了张鑫旭大神的文章:
行高指的是什么?
行高指的是文本行的基线间的距离。什么是基线?
基线不是文字的下端沿。是英文字母X的下端沿。
文字有顶线,底线,基线和中线,用以确定文字行的位置。
什么是行距?
行高与字体尺寸之间的差。还要理解一个概念 -- 行内框
行内元素会生成一个行内框。它无法显示出来,但是又确实存在。
在没有其他因素影响的时候,行内框等于内容区域。
> 设定行高可以增加或者减少行内框的高度,即:将行距的值(行高-字体尺寸)除以2,分别加到内容区域的上下两边。这是理解的关键,也就是内容区域的上面和下面均等增加一个距离。可以在一段文字上进行调试看看,发现增加减小line-height时,文字是整体上下缩进的,而非第一行不动,后面的向上靠拢。
行内框具有垂直居中性。即行内框占据的空间按与文字内容公用水平中垂线。(张鑫旭)
关于vertical-align:middle属性,也很神奇,可以好好再拜读下大神的文章。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。