CSS居中方式

固定宽度块元素

1.块级盒子水平居中

1. 必须有宽度 
2. 左右外边距设置为auto

<div style="width:200px;margin:0 auto;">水平居中</div>

2.绝对定位水平垂直居中

<div class="box">
	<div class="child"></div>
</div>
.box {
      position: absolute;
      width: 500px;
      height: 300px;
      margin: auto;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: green;
    }

3.绝对定位+transform居中

<div class="box">
	<div class="child"></div>
</div>
.box {
      position: absolute;
      width: 300px;
      height: 200px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: green;
    }

4.flex布局居中

<div class="wrap">
   <div class="wrap-center">Hello world</div>
</div>
 .wrap {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .wrap-center {
        width: 100px;
        height: 100px;
        background-color: gray;
    }

5.grid布局居中

利用grid实现水平垂直居中，兼容性较差，不推荐。

.parent {
  height: 140px;
  display: grid;
}
.child { 
  margin: auto;
}

6.屏幕上水平垂直居中

屏幕上水平垂直居中十分常用，常规的登录及注册页面都需要用到。要保证较好的兼容性，还需要用到表布局。

<div class="outer">
    <div class="middle">
        <div class="inner">
            <p>一个好的程序员应该是那种过单行线都要往两边看的人。</p>
            <button value="add" id="add">增加内容</button>
        </div>
    </div>
</div>
 .outer {
            display: table;
            position: absolute;
            height: 100%;
            width: 100%;
        }
        .middle {
            display: table-cell;
            vertical-align: middle;
        }
        .inner {
            margin-left: auto;
            margin-right: auto;
            background: #2b2b2b;
            color:#fff;
            padding: 2rem;
            max-width: 320px;
        }

不固定宽度块元素

在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)
有三种方法可以对不定宽块状元素进行居中：

1.利用 table 标签进行居中

将要显示的元素加入到 table 标签当中，然后为 table 标签设置“左右margin”值为“auto”来实现居中； 或使用 display : table；然后设该元素“左右margin”值为“auto”来实现居中。后面的display:table; 方法会更简洁。

1. 为什么加入table标签?

   是利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

 <div>
      <table>
        <tbody>
          <tr>
            <td>
              <ul>
                <li>Hello world</li>
                <li>Hello world</li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    table {
      margin: 0 auto;
      border: 1px solid forestgreen;
    }

2. 利用 display 属性居中

改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。

1. 这种方法相比第一种方法的优劣势:

   不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值（变成inline-block就可以设置宽高）。

.container{
    text-align:center;
 }
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;  
 }

<div class="container">
    <ul>
        <li>Hello world</li>
        <li>Hello world</li>
    </ul>
</div>

3.通过 float(浮动) 居中

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

<div class="wrap">
  	<div class="wrap-center">Hello world</div>
</div>
.wrap {
      float: left;
      position: relative;
      left: 50%;
      clear: both;
    }
    .wrap-center {
      background: #ccc;
      position: relative;
      left: -50%;
    }

先设置父元素wrap清除浮动，然后左浮动。定位让wrap向右偏移50%。然后定义子元素相对于父元素向左偏移50%。脱离父元素。加个边框就可以明白一些了。另外用绝对定位也是可以的。

行内元素水平居中

顾名思义，行内元素居中是只针对行内元素的，比如文本（text）、图片（img）、按钮等行内元素，可通过给父元素设置 text-align:center 来实现。另外，如果块状元素属性display 被设置为inline时，也是可以使用这种方法。但有个首要条件是子元素必须没有被float影响，否则一切都是无用功。

.div1{
        text-align:center;
    }
<div class="div1">Hello world</div>

1.单行文本垂直居中

文字的行高等于盒子的高度.
行高 = 上距离 + 内容高度 + 下距离
Line-height: 盒子的高度

.wrap h2{
    margin:0;
    height:100px;
    line-height:100px;
    background:#ccc;
}

<div class="wrap">
    <h2>Hello world</h2>
</div>

2. 文字垂直居中 Vertical-align

功能1: 垂直居中

1. List item
   Vertical-align:只针对行内元素 与 行内块元素的 垂直居中对齐
2. 功能2: 去除图片底侧空白缝隙
   

3.文字水平居中

Text-align:center; 文字居中
当宽度不确定时:

1、span 是行内元素,需要先转换为 块元素 才能进行居中
2、div 是块元素, 块元素包裹行内元素,然后块元素居中 text-align:center

当宽度确定时

1、可以直接给 div 一个宽度 然后 margin:0 auto;

4.行内元素水平居中

行内元素也可以使用 Text-align:center; 实现居中对齐的效果

5.多行元素垂直居中

利用表布局（table）
利用表布局的vertical-align: middle可以实现子元素的垂直居中。

<div class="center-table">
    <p class="v-cell">The more technology you learn, the more you realize how little you know.</p>
</div>
 .center-table {
            display: table;
            height: 140px;
            border: 2px dashed #f69c55;
        }
        .v-cell {
            display: table-cell;
            vertical-align: middle;
        }

说明:

文中所述文字及代码部分汇编于网络。因时间不足，能力有限等原因，存在文字阐述不准及代码测试不足等诸多问题。因此只限于学习范围，不适用于实际应用。

文中所述方案只是居中方案其中的一部分，并不是全部。另代码中涉及CSS3的flex，transform，grid等内容都存在兼容性问题。