居中（水平+垂直，浮动+定位，定宽+不定宽）

Posted 2020-08-16 衣冠小禽兽

元素居中，是前端工作者一个老生常谈的话题，网上相关的资料很多，不同的人有不同的理解（不排除有直接copy的），这里我从实际项目需求出发，经过多次试验和总结，得出以下几种居中方法供大家试用并指正：

1. 单纯只是水平居中：

(1)元素宽度已知的情况下，假设为200px，可以采用定位+负的外边距，代码如下：

.container{position:relative}
.box{position:absolute;left:50%; margin-left:-100px;}

(2)元素宽度未知或者无法直接读取，可以采用文本居中，代码如下：

.container{text-align:center}
.box{display:inline-block}

(3)如果是水平居中一个浮动元素，需要在元素外层以及容器中间套一层div，代码如下：

.box-wrap{float:left;position:relative;left:50%}
.box{float:left;position:relative;left:-50%}

注意：上述的.box-wrap并不是起始的外层父元素，而是重新生成的一层嵌套元素，另外.box的left:-50%可以换成right:50%

2. 单纯只是垂直居中：

(1)元素高度已知的情况下，与上述元素宽度已知的情况类似，也是采用定位+负的外边距（只是将left换成了top）

(2)元素高度未知或者无法直接读取，可以采用文本居中，代码如下：

.container{height:500px;line-height:500px}
.box{display:inline-box;vertical-align:middle}

(3)元素高度未知或者无法直接读取，也可以采用在要居中的元素之前设置一个空的行内标签，假设为<span>，代码如下：

span{display:inline-block;width:0;height:100%;vertical-align:middle}
.box{display:inline-block;vertical-align:middle}

3. 同时满足水平和垂直方向的居中：

(1)元素宽度和高度已知的情况下，采用定位+负的外边距

(2)元素宽度和高度未知或者无法直接读取，并且没有浮动，可以采用flex布局，给父元素设置了display:flex后，目标子元素直接就是margin:auto

(3)对于浮动元素，也可以采用flex布局，代码如下：

.container{display:flex}
.box{justify-content:center;align-items:center}

注意：flex布局在低版本的ie中不适用，但是实现居中效果最为高效和便捷；

网上有人用到table和table-cell的布局方法，同样可以实现居中，但我不提倡，原因两点：一是涉及到三层嵌套，二是使用table重在表格展示，而不是网页布局