共计 4731 个字符，预计需要花费 12 分钟才能阅读完成。
CSS 居中是前端工程师常常要面对的问题，也是基本技能之一。
明天将以往应用过的办法做一个总结，包含程度居中，垂直居中及程度垂直居中计划。本文对一些相似计划进行归类总结，整顿后果如下。前面如有新计划，还会陆续的补充进来。
DEMO
<style>
.element_box {
width: 600px;
height: 300px;
color: #0aa;
border: 1px solid #0aa;
}
.element_item {
width: 300px;
height: 150px;
margin: 0 auto;
color: #fff;
background: #0aa;
}
</style>
<div class="element_box">
<div class="element_item"></div>
</div>程度居中
1.margin：auto
块（block）元素程度居中，子元素 margin: auto。
<style>
.element_item1 {margin: 0 auto;}
</style>
<div class="element_box">
<div class="element_item element_item1">
玉炉香，红蜡泪，偏照画堂秋思。眉翠薄，鬓云残，夜长衾枕寒。梧桐树，三更雨，不道离情正苦。一叶叶，一声声，空阶滴到明。</div>
</div>查看 DEMO
2.text-align：center
行内（inline-block、inline）元素程度居中。父元素 text-align: center。
<section>
<style>
.element_box2 {text-align: center;}
</style>
<div class="element_box element_box2">
<span>
曾认为真情会在你我的心间永驻，<br>
曾认为一辈子都要爱上来。<br>
但究竟，时光也会老去，人心也会变淡，<br>
走着走着便忘了已经，<br>
想着想着便走错了中央。<br>
有一天还是要面对拆散，<br>
面对这情深缘浅的事实；<br>
有一天咱们会分道杨镳，<br>
变成了最相熟的陌生人。</span>
</div>
</section>查看 DEMO
垂直居中
3.height + line-height
单行文字垂直居中，父元素height 值 === line-height 值。
<style>
.element_box3 {
height: 300px;
line-height: 300px;
}
</style>
<div class="element_box element_box3">
<span> 玉炉香，红蜡泪，偏照画堂秋思。</span>
</div>查看 DEMO
4. 幽灵元素
如果一个父元素中，有两个 inline-block 的子元素，且这两个子元素vertical-align: middle，那么这两个元素在垂直方向是居中的。
思路再扩大下，如果其中一个子元素的高度跟父元素一样，那么这两个子元素，在父元素都是垂直居中了。按此思路，元素垂直居中的实现：给父元素设置一个伪元素，display: inline-block; width: 0; height: 100%，且设置为在页面不可见，咱们称这个伪元素为 ” 幽灵元素 ”，通过给幽灵元素和子元素设置 vertical-align: middle 能够实现垂直居中。
<style>
.element_box4 {font-size: 0;}
.element_box4::after {
display: inline-block;
width: 0;
height: 100%;
content: ' ';
visibility: hidden;
vertical-align: middle;
}
.element_item4 {
font-size: 16px;
display: inline-block;
vertical-align: middle;
}
</style>
<div class="element_box element_box4">
<div class="element_item4">
要走的究竟是要走，想来到的最终还是会来到，没有那些搪塞的理由，留下的，只是那些没有保鲜期的诺言；一本往事录，合上的是谁的归宿，那已经盛开的花，只不过是擦肩而过的幸福。</div>
</div>查看 DEMO
留神：子元素宽度为 100% 时，右侧会有一丝空白。
程度垂直居中
5.table-cell 布局
行内元素、单行、多行文字水平垂直居中。
<style>
.element_box5 {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.element_item5 {
display: inline-block;
width: 80%;
}
</style>
<div class="element_box element_box5">
<div class="element_item5">
曾认为真情会在你我的心间永驻，曾认为一辈子都要爱上来。但究竟，时光也会老去，人心也会变淡，走着走着便忘了已经，想着想着便走错了中央。有一天还是要面对拆散，面对这情深缘浅的事实；有一天咱们会分道杨镳，变成了最相熟的陌生人。</div>
</div>查看 DEMO
6.flex 布局
块元素、行内元素、单行、多行文字水平垂直居中。
<style>
.element_box6 {
display: flex;
justify-content: center;
align-items: center;
}
.element_item6 {width: 80%;}
</style>
<div class="element_box element_box6">
<div class="element_item6">《童年．花草记忆》一念花开，一念花落。这山长水远的人间，究竟是要本人走上来。人在旅途，要一直的自我救赎。(桂花)
</div>
</div>查看 DEMO
7.grid
<style>
.element_box7 {display: grid;}
.element_item7 {
width: 80%;
margin: auto;
}
</style>
<div class="element_box element_box7">
<div class="element_item7">
来者要惜，去者要放。人生是一场旅行，不是所有人都会去同一个中央。道路的邂逅，总是漂亮，离别的驿站，总是苍凉。不论喜与愁，该走的还是要走，该来的终究会来。人生的旅程，大半是孤独。懂得珍惜，来的俱是漂亮；舍得撒手，走的不成累赘。对过来，要放；对当初，要惜；对未来，要信
</div>
</div>查看 DEMO
8.position + 负 margin
实用于固定大小的块级元素，margin-left、margin-top为元素宽、高的一半。
<style>
.element_item8 {
position: relative;
top: 50%;
left: 50%;
width: 400px;
height: 224px;
margin-top: -112px;
margin-left: -200px;
}
</style>
<div class="element_box">
<img class="element_item8" src="img/20190419141710_4735vxaqwhri_small.jpg" />
</div>查看 DEMO
9.position + calc()
实用于固定大小的块级元素，calc计算50% - 元素宽或高的一半。
<style>
.element_box9 {position: relative;}
.element_item9 {
position: absolute;
top: calc(50% - 75px);
left: calc(50% - 150px);
width: 300px;
height: 150px;
overflow: hidden;
}
</style>
<div class="element_box element_box9">
<div class="element_item9">
走得顺时，不用太张狂，就算你爬到了坡顶，究竟还要走下坡路；<br>
走得快时，毋庸太得意，你的脚力总是无限的，不如加快脚步把短暂的路走得精彩些；<br>
走得累时，莫要太悲叹，要晓得歇一歇，禁受了操劳，才晓得刚强与珍惜；<br>
走得苦时，切勿太悲怆，生存里是没有死路的，苦难是人生的梯，助你走出低谷和沼泽。</div>
</div>查看 DEMO
10.position + margin: auto
<style>
.element_box10 {
position: relative;
display: inline-block;
width: 49%;
}
.element_item10 {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: auto;
}
</style>
<div class="element_box element_box10">
<img class="element_item element_item10" src="img/20190419141711_6640njffmwvi_small.jpg">
</div>
<div class="element_box element_box10">
<img class="element_item element_item10" style="width: 150px;" src="img/c1647f58eed70de7fd7a19a63347d137.jpg">
</div>查看 DEMO
11.position + transform
<style>
.element_box11 {
position: relative;
display: inline-block;
width: 49%;
}
.element_item11 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: auto;
}
</style>
<div class="element_box element_box11">
<img class="element_item element_item11" src="img/20190419141711_6640njffmwvi_small.jpg">
</div>
<div class="element_box element_box11">
<img class="element_item element_item11" style="width: 150px;" src="img/c1647f58eed70de7fd7a19a63347d137.jpg">
</div>查看 DEMO
12.background
实用于图片的居中。
<style>
.element_box12 {background: url(img/20190419141711_9501mvvwvonf_small.jpg) no-repeat center;
background-size: 80%;
}
</style>
<div class="element_box element_box12"></div>查看 DEMO
13.padding 填充
这种罕用于父元素大小不固定的场景。
总结
居中实现计划有很多，自己比拟罕用的是：flex 布局、position + transform。上述程度垂直居中计划中：计划 8、计划 9 只实用于仅居中元素已固定宽高。
正文完