常用的居中方法

水平居中：
根据子元素为行内元素还是块状元素，宽度一定还是宽度未定的变化，采取的布局方案不同。

1. 子元素是行内元素

HTML:

<div class="father">
    <span class="child-inline">行内元素水平居中</span>
</div>

CSS:

.father{
      width: 100%;
       height: 100px;
       text-align: center;
       background: #666;
}

2. 子元素是无宽度块级元素

HTML:

<div class="father">
    <div class="child-noWidth">我是不定宽的块级元素</div>
</div>

CSS:

.father{
text-align: center;
}

.father .child-noWidth{
display: inline;
}

3. 子元素是有宽度的块级元素

HTML:

<div class="father">
    <div class="child-width">定宽块级元素水平居中</div>
</div>

CSS:

.child-width{
width: 200px;
margin:0 auto;
}

4. 对以上情况都通用的方法:flex布局（可爱的自适应布局）

HTML:

<div class="father">
    <div class="child ">我是子元素</div>
</div>

CSS:

.father{
            display: flex;
            justify-content: center;
            background: lightblue;
            margin-top: 20px;
        }

垂直居中:
分为多行内联文本，单行内联文本以及块级元素。

1. 单行内联文本（保证行高与元素高度一致）

HTML:

<div class="container">
    <span>我是只有一行的小文本</span>
</div>

CSS:

.container{
height: 30px;
line-height: 30px;
}

2. 多行内联文本

HTML:

<div class="container">
    <span>我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本我是有多行的大文本</span>
</div>

CSS:

.container{
            width: 100%;
            height: 200px;
            background: lightblue;
            display: table-cell;
            vertical-align: middle;
        }

3.块级元素（借助position）

HTML:

<div class="f">
    <div class="c">hello</div>
</div>

CSS:

        .f{
            position: relative;
            width: 100%;
            height:200px;
            background: lightblue;
        }
        .c{
            position: absolute;
            width: 100%;
            height: 100px;
            top: -50px;
            margin-top: 100px;
            background: lightpink;
        }

先以父元素高度的一半作为margin-top的值，再将top设置为负的自身高度的一半，即可对准父元素的中心基准线

4. 对以上情况都通用的方法: flex布局（可爱的自适应布局）

HTML:

<div class="father">
    <div class="child">hello,this is child-element</div>
</div>

<div class="father">
    <span class="child">hello,this is child-element</span>
</div>

CSS:

        .father
           {
            margin-top: 10px;
            height: 50px;
            width: 100%;
            /*通用的垂直居中*/
            display: flex;
            align-items:center;
            background: lightblue;
          }
        .child
          {
            background: lightpink;
          }