详解"/>
CSS（九）垂直居中详解
一般情况下有的需要问水平居中和垂直居中.
常见的水平居中和垂直居中有：
水平居中：
- 行内元素： text-align: center;
- 块级元素：margin: 0 auto;
- absolute+ transform;
- flex+ justify-content: center;
垂直居中：
- line-height: height;
- absolute+ transform;
- flex+ justify-content: center;
- table
垂直居中是一个比较常见的问题，更是一道无数前端er都被问到过的面试题。
以下分两种情况，情况一要知道居中元素的长和宽，情况二不需要知道居中元素的长和宽。
目录
以下3种需要知道子元素的宽度和高度的情况生成的垂直居中样式为：
1.absolute + 负margin
2. absolute + margin auto
3. absolute + calc
说明：以下方法都不需要知道子元素的长和宽，所以不需要size类，所以子元素的宽度为文本大小，创建的页面样式为：
4. absolute + transform
5. lineheight
6. writing-mode
7. table
8. table-cell
9. flex
10. grid
总结
情况一：仅居中元素定宽高适用
- absolute + 负margin
- absolute + margin auto
- absolute + calc
情况二：居中元素不定宽高
- absolute + transform
- lineheight
- writing-mode
- table
- css-table
- flex
- grid
以下3种需要知道子元素的宽度和高度的情况生成的垂直居中样式为：
1.absolute + 负margin
绝对定位的百分比是相对于父元素的宽高，通过这个特性可以让子元素的居中显示，但绝对定位是基于子元素的左上角，期望的效果是子元素的中心居中显示。
为了修正这个问题，可以借助外边距的负值，负的外边距可以让元素向相反方向定位，通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了，css代码如下
.container {border: 1px solid aqua;width: 300px;height: 300px;position: relative;
}.element {background: yellowgreen;position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;
}.element.size {width: 100px;height: 100px;
}这是比较常见的方式，这种方式比较好理解，兼容性也很好，缺点是需要知道子元素的宽高。
2. absolute + margin auto
这种方式也要求居中元素的宽高必须固定，HTML代码如下
<div class="container"><div class="element size">123123</div>
</div>这种方式通过设置各个方向的距离都是0，此时再将margin设为auto，就可以在各个方向上居中了
.container {border: 1px solid aqua;width: 300px;height: 300px;position: relative;
}.element {background: yellowgreen;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;
}
.element.size {width: 100px;height: 100px;
}这种方法兼容性也很好，缺点是需要知道子元素的宽高.
3. absolute + calc
这种和第一种类似，只不过将两次属性合并在一个属性中，HTML代码如下
<div class="container"><div class="element size">垂直居中</div>
</div>感谢css3带来了计算属性，既然top的百分比是基于元素的左上角，那么在减去宽度的一半就好了，代码如下
.container {border: 1px solid aqua;width: 300px;height: 300px;position: relative;
}.element {background: yellowgreen;position: absolute;top: calc(50% - 50px);left: calc(50% - 50px);
}.element.size {width: 100px;height: 100px;
}这种方法兼容性依赖calc的兼容性，缺点是需要知道子元素的宽高
说明：以下方法都不需要知道子元素的长和宽，所以不需要size类，所以子元素的宽度为文本大小，创建的页面样式为：
4. absolute + transform
还是绝对定位，但这个方法不需要子元素固定宽高，所以不再需要size类了，HTML代码如下
<div class="container"><div class="element">垂直居中</div>
</div>修复绝对定位的问题，还可以使用css3新增的transform，transform的translate属性也可以设置百分比，其是相对于自身的宽和高，所以可以讲translate设置为-50%，就可以做到居中了，代码如下
.container {border: 1px solid aqua;width: 300px;height: 300px;position: relative;
}.element {background: yellowgreen;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}这种方法兼容性依赖translate2d的兼容性
5. lineheight
利用行内元素居中属性也可以做到水平垂直居中，HTML代码如下
<div class="container"><div class="element">垂直居中</div>
</div>把box设置为行内元素，通过text-align就可以做到水平居中，但很多同学可能不知道通过通过vertical-align也可以在垂直方向做到居中，代码如下
.container {border: 1px solid aqua;width: 300px;height: 300px;line-height: 300px;position: relative;text-align: center;
}.element {background: yellowgreen;display: inline-block;line-height: initial;vertical-align: middle;
}这种方法需要在子元素中将文字显示重置为想要的效果
6. writing-mode
很多同学一定和我一样不知道writing-mode属性，感谢@张鑫旭老师的blog.简单来说writing-mode可以改变文字的显示方向。
更神奇的是所有水平方向上的css属性，都会变为垂直方向上的属性，比如text-align，通过writing-mode和text-align就可以做到水平和垂直方向的居中了，只不过要稍微麻烦一点
<div class="container"><div class="container-inner"><div class="element">垂直居中</div></div>
</div>.container {border: 1px solid aqua;width: 300px;height: 300px;position: relative;writing-mode: vertical-lr;text-align: center;
}.container-inner {writing-mode: horizontal-tb;display: inline-block;text-align: center;width: 100%;
}.element {background: yellowgreen;display: inline-block;margin: auto;text-align: left;
}7. table
曾经table被用来做页面布局，现在没人这么做了，但table也能够实现水平垂直居中，但是会增加很多冗余代码
<table><tbody><tr><td class="container"><div class="element">123123</div></td></tr></tbody>
</table>tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了
.container {border: 1px solid aqua;width: 300px;height: 300px;text-align: center;
}.element {background: yellowgreen;display: inline-block;
}这种方法就是代码太冗余，而且也不是table的正确用法
8. table-cell
css的table-cell属性，可以让我们把普通元素，变为table元素的现实效果，但还是需要将父元素中的设置为水平垂直居中。即
text-align:center;
vertical-align:middle;同时要将子元素设置为inline-block;如果不设置，则子元素宽度会变为100%，其实这个主要看业务需求，可以设置为一个固定宽度。
<div class="container"><div class="element">垂直居中</div>
</div>通过css属性，可以让div显示的和table-cell一样
.container {border: 1px solid aqua;width: 300px;height: 300px;display: table-cell;text-align: center;vertical-align: middle;
}.element {background: yellowgreen;display: inline-block;
}这种方法和table一样的原理，但却没有那么多冗余代码，兼容性也还不错
9. flex
flex作为现代的布局方案，颠覆了过去的经验，只需几行代码就可以优雅的做到水平垂直居中
<div class="container"><div class="element">垂直居中</div>
</div>.container {border: 1px solid aqua;width: 300px;height: 300px;display: flex;align-items: center;justify-content: center;
}.element {background: yellowgreen;
}目前在移动端已经完全可以使用flex了，PC端需要看自己业务的兼容性情况.
10. grid
通过grid也可以实现水平垂直居中
<div class="container"><div class="element">垂直居中</div>
</div>.container {border: 1px solid aqua;width: 300px;height: 300px;display: grid;
}.element {background: yellowgreen;align-self: center;justify-self: center;
}代码量也很少，但兼容性不如flex，不推荐使用.
以上代码都经过chrome浏览器测试，详细代码见GitHub：
总结
下面对比下各个方式的优缺点，肯定又双叒叕该有同学说回字的写法了，简单总结下
- PC端有兼容性要求，宽高固定，推荐absolute + 负margin
- PC端有兼容要求，宽高不固定，推荐css-table
- PC端无兼容性要求，推荐flex
- 移动端推荐使用flex
更多推荐
CSS（九）垂直居中详解
发布评论