行内元素居中
文本垂直居中
单行文本垂直居中
设置line-height与盒子高度一样就行 这里有一个误区，我经常在设置单行文本居中的时候，会习惯性的设置height属性与lin-height属性一样，其实完全没必要，只设置line-height就行，这时候盒子的高度由line-height撑起来，与height完全相同。
多行文本垂直居中
- vertical-align vertical-align 可以指定行内元素的垂直对其方式
1<div class="box"> 2 <div class="center"> 3 秀色湖光照大地，照亮我也照亮你 4 </div> 5</div> 6<style> 7.box { 8 background-color: orange; 9 line-height: 200px; 10 width: 300px; 11} 12.center { 13 background-color: green; 14 line-height: 20px; 15 display: inline-block; 16 vertical-align: middle; 17} 18</style>
这个方法需要多增加一个标签(.box)将需要居中的内容包裹起来。设置父元素的line-height为元素的高度，居中子元素.center的display为inline-block，使其拥有行内元素的特性，因为line-height的继承性，所以设置line-height: 20px;重置居中子元素的line-height，然后设置vertical-align: middle;在行框盒子内垂直居中对齐。 2. table-cell 不同于行内元素设置利用vertial-align会使当前元素垂直居中对齐，table-cell元素设置vertial-align会让它的子元素垂直居中对齐，就算子元素是块级元素也会垂直对齐，所以想要实现块级元素的垂直居中也可以使用这个方法。
1.box { 2 height: 200px; 3 display: table-cell; 4 vertical-align: middle; 5}
行内元素水平居中
text-align控制行内元素的水平对齐方式，其值有left,center,right.
块级元素水平居中
margin的值为auto可以占据对应方向的所有剩余方向，如果设置水平方向上两个方向的margin值都为auto，两个方向就会平分剩余空间，从而实现居中。 但是我们从来没有使用这个方法来实现垂直方向的居中呢？因为auto值起作用有一个前提条件，就是在对应的方向上如果不设置具体的长度，会自动铺满。显然，只有width属性时可以铺满父元素的。
块级元素垂直居中
那可不可以利用margin:auto实现垂直方向的居中呢？也是有办法的，我们可以通过修改writing-mode属性改变块的流动，使块横向流动，此时height方向就会像width一样默认平铺撑满，这是设置margin:auto就可以实现垂直方向上的居中。但是这样做有个副作用，因为writing-mode属性的可继承性，会导致该元素下的所有子元素全部的流方向都变为横向。此时水平方向不能再使用此方法实现居中了。
1<div class="box"> 2 <div class="center"> 3 从此烟雨落京城，一人撑伞两人行。 4 </div> 5</div> 6<style> 7.box { 8 background-color: orange; 9 height: 200px; 10 writing-mode: vertical-lr;; 11} 12.center { 13 background-color: green; 14 height: 50px; 15 margin: auto 0; 16} 17</style>
水平垂直居中
- position(居中元素固定宽高) 设置父元素绝对定位，需要居中的元素相对定位，top,right,bottom,left的值都为0，此时如果不设置具体的宽高，居中元素就会在水平和垂直两个方向上都铺满元素，给需要居中的元素设置宽高配合margin:auto,就可以实现绝对居中了。 注意，只兼容IE8以上
- vertical-align
- 先实现居中元素在水平方向上的居中，设置居中元素的display属性为inline-block，使其拥有行内元素的特性，给外层的父元素设置text-align:center;使居中元素在水平方向上居中
- 再实现在垂直方向上的居中，这个方法需要添加一个辅助元素，设置辅助元素height:100%;使当前盒子的高度撑满父元素，然后设置vertical-align:middle,使其在垂直方向上居中对齐。
1<div class="box"> 2 <div class="assist"></div> 3 <div class="center"> 4 他朝若是同淋雪，此生也算共白头。 5 </div> 6</div> 7<style> 8.box { 9 background-color: orange; 10 height: 200px; 11 width: 500px; 12 text-align: center; 13} 14.center { 15 background-color: green; 16 width: 150px; 17 display: inline-block; 18 vertical-align: middle; 19} 20.assist { 21 display: inline-block; 22 height: 100%; 23 vertical-align: middle; 24} 25</style>
- position配合margin 这个方法适用与居中元素宽高已知的情况。设置父元素相对定位，居中元素绝对定位，left、top值都为50%，left、top的值分别相对于父元素的宽高计算，此时居中元素的左上顶点会位于父元素的正中央。然后再设置居中元素的margin-left、margin-top为宽高的负一半，让居中元素在水平方向相对于自身宽度的50%向左偏移，在垂直方向向上偏移相对于自身高度的50%，就可以实现居中效果了。
1<div class="box"> 2 <div class="center"> 3 梅须逊雪三分白，雪却输梅一段香。 4 </div> 5</div> 6<style> 7.box { 8 background-color: orange; 9 height: 200px; 10 width: 500px; 11 position: relative; 12} 13.center { 14 background-color: green; 15 width: 150px; 16 height: 50px; 17 position:absolute; 18 top:50%; 19 left:50%; 20 margin-left: -75px; 21 margin-top: -25px; 22} 23</style>
- position配合transform 第四种方法是使用position配合transform。这种方法跟上一个方法原理上基本相似，但使用场景增加了宽高不固定的元素。一样的先设置父元素相对定位，居中元素绝对定位，left、top值都为50%。再设置居中元素transform: traslate(-50%, -50%);，translate的百分比值是相对于自身去计算的，让居中元素在水平方向相对于自身宽度的50%向左偏移，在垂直方向向上偏移相对于自身高度的50%，就可以实现居中效果了。
1<div class="box"> 2 <div class="center"> 3 现在我才听说，你当初找过我，我能想象你当时有多难过。 4 </div> 5</div> 6<style> 7.box { 8 background-color: orange; 9 height: 200px; 10 width: 500px; 11 position: relative; 12} 13.center { 14 background-color: green; 15 width: 150px; 16 position:absolute; 17 top:50%; 18 left:50%; 19 transform: traslate(-50%, -50%); 20} 21</style>
- flex 如果不需要考虑兼容IE9及以前的浏览器，flex是较好的方式。 设置父元素为flex容器，主轴、交叉轴对齐方式都为居中对。
1.box { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5}