强调一下，这是笔试必考题。 很多笔试官都喜欢问这个问题，我也被问过好几次了。
达到上图的疗效，看似很简单，其实却暗含玄机。 本文总结了以下几种CSS实现水平居中和垂直居中的形式。 本文将对它们进行一一介绍。 我把这篇文章整理到了github仓库：
欢迎明星。
仅具有固定宽度和高度的居中元素适用：
居中元素具有可变的宽度和高度：
1.绝对+负边距
为了达到里面的疗效，我们先做一些规划工作。 假设HTML代码如下，一共有两个元素，父元素和子元素：
123123
wp是父元素的类名，box是子元素的类名。 由于固定宽度和可变宽度的区别css兼容性写法，所以使用size来表示指定的长度。 以下是所有特效常用的代码，主要是设置颜色和宽度高度。
注：这段常用代码之前不会重复，只会给出相应的提示。
/* 公共代码 */
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
}
.box {
background: green;
}
.box.size{
width: 100px;
height: 100px;
}
/* 公共代码 */绝对定位的比例是相对于父元素的宽度和高度。 通过这个特性，可以显示子元素的中心，但是绝对定位是以子元素的左上角为基准的。 期望的效果是将子元素的中心居中。
为了纠正这个问题，您可以使用房间距离的负值。 负的外部距离可以将元件定位在相反的方向。 通过指定子元素的外部距离为子元素之间距离一半的负值，可以使子元素居中。 CSS代码如下。
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */
/* 定位代码 */
.wp {
position: relative;
}
.box {
position: absolute;;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}这是我比较常用的方法。 这些方法更容易理解并且具有良好的兼容性。 缺点是需要知道子元素的宽度和高度。
点击查看完整DEMO：
2.绝对+自动保证金
这些方法还要求居中元素的宽度和高度必须是固定的。 HTML代码如下：
123123
这些方法将各个方向的距离设置为0，然后将margin设置为auto，这样就可以在各个方向上居中。
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */
/* 定位代码 */
.wp {
position: relative;
}
.box {
position: absolute;;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}这些技术的兼容性也很好，缺点是需要知道子元素的宽度和高度。
点击查看完整DEMO：
3.绝对+计算
这些方法还要求居中元素的宽度和高度必须是固定的，因此我们减少了盒子的尺寸等级，HTML代码如下：
123123
感谢css3带来的估计属性。 由于 top 的比例是基于元素的左上角，因此最好将其乘以长度的一半。 代码如下
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */
/* 定位代码 */
.wp {
position: relative;
}
.box {
position: absolute;;
top: calc(50% - 50px);
left: calc(50% - 50px);
}这些技术的兼容性取决于计算的兼容性。 缺点是需要知道子元素的宽度和高度。
点击查看完整DEMO：
4.绝对+变换
或者绝对定位，但是这种方法不需要子元素固定宽度和高度，所以不再需要size类。 HTML代码如下：
123123
要解决绝对定位的问题，还可以使用css3的新变换。 Transform的translate属性还可以设置比例，这个比例是相对于自身的宽高而言的，所以可以将translate设置为-50%来实现居中，代码如下：
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */
/* 定位代码 */
.wp {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}这些技术的兼容性取决于translate2d的兼容性。
点击查看完整DEMO：
5.行高
水平和垂直居中也可以借助行内元素的居中属性来实现。 HTML代码如下：
123123
将box设置为行内元素，通过text-align可以水平居中，但是很多朋友可能不知道，通过vertical-align也可以垂直居中。 代码如下：
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */
/* 定位代码 */
.wp {
line-height: 300px;
text-align: center;
font-size: 0px;
}
.box {
font-size: 16px;
display: inline-block;
vertical-align: middle;
line-height: initial;
text-align: left; /* 修正文字 */
}这些技术需要将子元素上的文本显示重置为所需的效果。
点击查看完整DEMO：
6. 书写模式
很多朋友一定和我一样对writing-mode属性一无所知。 感谢张新旭先生的反馈。 简单来说，writing-mode可以改变文本的显示方向。 例如，您可以使用writing-mode 将文本显示更改为垂直方向。
水平方向
垂直方向.div2 {
writing-mode: vertical-lr;
}疗效如下：
水平方向
垂
直
方
向更神奇的是，所有水平方向的css属性都会变成垂直方向的属性，比如text-align。 通过writing-mode和text-align，可以实现水平和垂直居中，但是需要麻烦一点：
123123
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */
/* 定位代码 */
.wp {
writing-mode: vertical-lr;
text-align: center;
}
.wp-inner {
writing-mode: horizontal-tb;
display: inline-block;
text-align: center;
width: 100%;
}
.box {
display: inline-block;
margin: auto;
text-align: left;
}这些方法的实现和理解稍微复杂一些。
点击查看完整DEMO：
7. 桌子
以前都是用表格来进行页面布局，但现在没有人这么做了，不过表格也可以水平居中、垂直居中，会减少很多冗余代码：
123123
tab单元格中的内容自然是垂直居中的，只需添加水平居中属性即可。
.wp {
text-align: center;
}
.box {
display: inline-block;
}这些方法都是代码过于冗余，而且并不是table的正确用法。
点击查看完整DEMO：
8. CSS 表格
css新增加的table属性可以让我们将普通元素变成效果逼真的table元素。 通过这个功能，还可以实现水平和垂直居中。
123123
通过下面的css属性，div可以像表格一样显示：
.wp {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box {
display: inline-block;
}这些技巧和table的原理是一样的，但是没有那么多冗余代码，兼容性也不错。
点击查看完整DEMO：
9. 弯曲
Flex作为一种现代化的布局解决方案，颠覆了以往的体验，只需几行代码就可以实现高贵的水平和垂直居中。
123123
.wp {
display: flex;
justify-content: center;
align-items: center;
}目前flex已经可以在联通端使用，PC端需要检查自身业务的兼容性。
点击查看完整DEMO：
10. 网格
谢谢@一组姐提供的这个解决方案。 新的css网格布局，因为兼容性不是很好css兼容性写法，所以没有太关注。 网格还可用于实现水平和垂直居中。
123123
.wp {
display: grid;
}
.box {
align-self: center;
justify-self: center;
}代码量也很少，但是兼容性不如flex，所以不推荐。
点击查看完整DEMO：
总结
下面我们来比较一下各种形式的异同。 肯定又到了朋友说怎么写字的时候了。 我们简单总结一下：
Tips：flex的兼容性解决方案请看这里：
最近，我发现很多朋友对CSS不够重视，这显然是不正确的。 比如，有那么多朋友不明白下面这些简单的问题，我也很无语：
123
123.red {
color: red
}
.blue {
color: blue
}当被问到两个div的颜色是什么时，只有40%的朋友能正确回答。 这40%中，还有很多朋友不知道为什么。 希望那些朋友能给我一些CSS基础知识的指导。
活动推荐
去年12月7-8日在南京国际会议中心举办的ArchSummit全球架构师技术大会邀请了100多位国内外专业讲师，并设立后端技术专题，分享他们最新的黑科技和开发经验。
发表评论