本文共 2788 字,大约阅读时间需要 9 分钟。
单行文本的垂直居中是最简单的,设置line-height
与盒子高度一样就可以。
这里有一个误区,很多人设置单行文本居中的时候会同时设置height
与line-height
相同,其实大可不必设置height
,只设置line-height
就可以,这时候盒子的高度由line-height
撑起来,与line-height
完全相同。
.center { // 完全可以不设置高度 // height: 20px; line-height: 20px;}
vertical-align
vertical-align
可以指定行内元素的垂直对齐方式。 这个方法需要多增加一个.center
元素将需要居中的内容包裹起来。设置父元素的line-height
为元素 的高度,居中子元素.center
的display
为inline-block
,使其拥有行内元素的特性,因为line-height
的继承性,所以设置line-height: 20px;
重置居中子元素的line-height
,然后设置vertical-align: middle;
在行框盒子内垂直居中对齐。
虽然你们是扮演路人甲乙丙丁,但是一样是有生命、有灵魂的。
table-cell
不同于行内元素设置利用vertial-align
会使当前元素垂直居中对齐,table-cell
元素设置vertial-align
会让它的子元素垂直居中对齐,就算子元素是块级元素也会垂直对齐,所以想要实现块级元素的垂直居中也可以使用这个方法。
.box { height: 200px; display: table-cell; vertical-align: middle;}
text-align
控制子行内元素的水平对齐方式,这个非常简单直接设置text-align:center
就可以。
.center { text-align: center;}
margin
的值为auto
可以占据对应方向的所有剩余空间,如果设置水平方向上两个方向的margin
值都为auto
,两个方向就会平分剩余空间,从而实现居中。
那么为什么我们从来没有使用这个方法来实现垂直方向的居中呢?因为auto
值起作用有一个前置条件,就是在对应的方向上如果不设置具体的长度,会自动铺满。很显然width是可以铺满父元素的,而height
不可以。
.center { margin: 0 auto;}
那可不可以利用margin:auto;
实现垂直方向的居中呢?当然可以,可以通过修改writing-mode
改变块的流动,使块横向流动,此时height
方向就会默认平铺撑满,设置margin:auto;
就可以实现垂直方向的居中。但是这个方法有副作用,因为writing-mode
属性的可继承性,会导致该元素下得所有子元素全部流方向全部变为横向。而且此时水平方向不能再使用此方法实现居中了。
虽然你们是扮演路人甲乙丙丁,但是一样是有生命、有灵魂的。
设置父元素绝对定位,居中元素相对定位,top、right、bottom、left
的值都为0,此时如果不设置具体的宽高,居中元素就会在水平和垂直两个方向都铺满父元素。此时再给它设置具体宽高配合margin:auto;
就可以实现绝对居中了。
需要注意的是这个方法只能兼容IE8及以上浏览器,如果项目要兼容IE7可以使用下面这种方法
.box { position: relative;}.center { position:absolute; width: 200px; height: 200px; top:0; bottom:0; left:0; right:0; margin: auto;}
首先实现居中元素在水平方向上的居中,设置居中元素的display
值为inline-clock
,使其拥有行内元素的特性。给外层的盒元素设置text-align: center;
使居中元素在水平方向上居中。
然后再实现在垂直方向上的居中,这个方法需要添加一个辅助元素,设置辅助元素height:100%;
使当前行框盒子的高度撑满父元素,然后设置vertical-align: middle;
使其在垂直方向上居中对齐。
虽然你们是扮演路人甲乙丙丁,但是一样是有生命、有灵魂的。
这个方法适用与居中元素宽高已知的情况。设置父元素相对定位,居中元素绝对定位,left、top
值都为50%,left、top
的值分别相对于父元素的宽高计算,此时居中元素的左上顶点会位于父元素的正中央。然后再设置居中元素的margin-left、margin-top
为宽高的负一半,让居中元素在水平方向相对于自身宽度的50%向左偏移,在垂直方向向上偏移相对于自身高度的50%,就可以实现居中效果了。
虽然你们是扮演路人甲乙丙丁,但是一样是有生命、有灵魂的。
第四种方法是使用position
配合transform
。这种方法跟上一个方法原理上基本相似,但使用场景增加了宽高不固定的元素。一样的先设置父元素相对定位,居中元素绝对定位,left、top
值都为50%。再设置居中元素transform: traslate(-50%, -50%);
,translate
的百分比值是相对于自身去计算的,让居中元素在水平方向相对于自身宽度的50%向左偏移,在垂直方向向上偏移相对于自身高度的50%,就可以实现居中效果了。
虽然你们是扮演路人甲乙丙丁,但是一样是有生命、有灵魂的。
如果不需要考虑兼容IE9
及以前的浏览器,flex
布局是最推荐的方式。
设置父元素为flex
容器,主轴、交叉轴对齐方式都为居中对。关于flex
的相关知识可以参考阮大神的博客,介绍的非常详细。
.box { display: flex; align-items: center; justify-content: center;}
转载地址:http://fiozi.baihongyu.com/