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只实用于仅居中元素已固定宽高。