1、水平居中

水平居中可分为行内元素水平居中和块级元素水平居中

1.1 行内级元素水平居中

这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。

.center{
        text-align:center;
}
<div class="center">水平居中</div>

1.2 块级元素水平居中

定宽块级元素水平居中

只需给需要居中的块级元素加margin:0 auto即可，但这里需要注意的是，这里块状元素的宽度width值一定要有
```
  .center{
      width:200px;
      margin:0 auto;
      border:1px solid red;
  }
  <div class="center">水平居中</div>
```
不定宽块级元素水平居中

不定宽，即块级元素宽度不固定

方法1：设置flex布局

只需把要处理的块状元素的父元素设置display:flex,justify-content:center;
```
  .center{
      display:flex;
      justify-content:center;
  }
  <div class="center">
      <div class="flex-div">1</div>
      <div class="flex-div">2</div>
  </div>
```
方法2：position + 负margin；

方法3：position + transform；

注：这里方法2、3同下面垂直居中一样的道理，只不过需要把top/bottom改为left/right，在垂直居中部分会详细讲述。

2、垂直居中

2.1单行文本垂直居中：

对于单行文本，我们只需要将文本行高(line-height)和所在区域高度(height)设为一致即可：

  .center6{
            width: 200px;
            height: 100px; 
            border: 1px solid red;
            line-height: 100px; 
        }
  <div class="center">单行文本垂直居中</div>

2.2多行文本垂直居中：

多行文本垂直居中分为两种情况，一个是父级元素高度不固定，随着内容变化；另一个是父级元素高度固定。

父级元素高度不固定：

父级高度不固定的时，高度只能通过内部文本来撑开。这样，我们可以通过设置内填充（padding）的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：

  .center {
            width: 200px;
            margin: 0 auto;
            border: 1px solid red;
            padding: 50px 20px;
        }
  <div class="center">单行/多行文本垂直居中</div>

父级元素高度固定：

css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，结合display: table;，可以使得div模拟table属性。因此我们可以设置父级div的display属性：display: table;；然后再添加一个子div包含文本内容，设置其display:table-cell;和vertical-align:middle; 具体代码如下：

        #outer{
            width: 400px;
            height: 200px;
            margin: 50px auto;
            border: 1px solid red;
            display: table;
        }
        #middle{ 
            display:table-cell; 
            vertical-align:middle;  
            text-align: center; /*设置文本水平居中*/  
            width:100%;   
        }
    <div id="outer">
        <div id="middle">
            这是固定高度多行文本垂直居中，
            这是固定高度多行文本垂直居中，
            这是固定高度多行文本垂直居中，
            这是固定高度多行文本垂直居中。
        </div>
    </div>

2.3 块级元素水平垂直居中

方法1：flex布局

在需要垂直居中的父元素上，设置display:flex和align-items：center

要求：父元素必须显示设置height值，子div大小不需要固定

        #outer{
            background-color: #13CDF4;
            width: 300px;
            height: 200px;
            display: flex;
            justify-content: center;/*实现水平居中*/
            align-items:center; /*实现垂直居中*/
        }
        #middle{ 
            background-color: #E41627;
            width: 100px;
            height: 100px;
        }
 <div id="outer">
      <div id="middle">
          利用display: flex实现子div大小不固定垂直居中
      </div>          
 </div>

方法2：利用position和top和负margin

要求：需知宽高，即子div大小固定

1、设置元素为absolute/relative/fixed
2、margin=负一半

        #outer{
                background-color: #13CDF4;
                width: 300px;
                height: 200px;
                position: relative;
        }
        #middle{ 
                background-color: #E41627;
                width: 100px;
                height: 100px;
                position: absolute;
                left: 50%; 
                top: 50%;
                margin-left: -50px;    //设置水平居中
                margin-top: -50px;    //设置垂直居中
        }
 <div id="outer">
        <div id="middle">
            子div(固定大小)垂直居中
        </div>          
 </div>

方法3：利用position和top和transform

transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。

所以子div大小无需固定

#outer{
        background-color: #13CDF4;
        width: 300px;
        height: 200px;
        position: relative;
        }
#middle{ 
        background-color: #E41627;
        width: 100px;
        height: 100px;
        margin: auto;
        position: absolute;
        left: 50%; 
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        /*
        transform: translate(-50%,-50%); /*自己的50% */
        */
    }
    <div id="outer">
        <div id="middle">
            子div垂直居中
        </div>          
   </div>

CSS 水平居中、垂直居中、水平垂直居中