垂直居中和水平居中

一.水平居中

(1)文本图片行内元素水平居中

.inlineCenter{
    text-align：center；
    background：#eeeb38；
}
<div class = "inlineCenter">
    行内元素居中
</div>

行内元素居中.png

2.确定宽度的块级元素水平居中

设置左右边距auto和宽度
.blockCenter{
            margin-left: auto;
            margin-right: auto;
            width: 20%;
            text-align: center;
            background: #eee;
        }
<div class="blockCenter">
      确定宽度的块级元素居中
</div>

确定宽度块级元素.png

(3)宽度不定的块级元素水平居中

    a.设置元素display：inline-block,text-align:center 
      缺点：失去块级元素特性
    b.使用相对定位居中：
        父元素：{float:left,position:relative,left:50%}
        子元素：{position:relative,left:-50%}
        缺点：文本脱离文档流，对后面布局会有影响
        .blockCenter{
            float: left;
            position: relative;
            left:50%
        }
        .block{
            position: relative;
            left:-50%;
            background: #59aecc;
        }
    <div class="blockCenter1">
        <div class="block">
            块居中,父元素设置左浮动,相对定位,左边50%,子元素相对定位,左边-50%
        </div>
    </div>

相对定位块居中.png

(4) 使用flex实现水平居中

弹性盒模型可以方便地实现水平和垂直居中，
效果可作用于多个元素，推荐使用flex进行水平和垂直居中
.flexCenter{
            display: flex;
            justify-content: center;   /*设置主轴对齐方式*/
            background: #cc996a;
        }
<div class="flexCenter">
    <div style="background: #46ee24">
        使用flex实现居中
    </div>
    <div style="background: #cc4f28">
        使用flex实现居中
    </div>
</div>

使用flex实现居中.png

二.垂直居中

(1) 父元素高度不确定的文本、图片、块级元素的垂直居中

此时需要文本，图片，块级元素将父元素“撑开”
设置父元素上下padding相同即可
.verticalCenter{
            padding: 20px 0;
            background: #59aecc;
        }
<div class="verticalCenter">
    <div style="background: #eee;width: 10%;height:50px">
        垂直居中
    </div>
</div>

父元素高度不定的垂直居中.png

(2)父元素高度确定的单行文本的垂直居中

通过给父元素设置line-height来实现
line-height值和父元素高度值相同
.verticalCenter{
            padding: 20px 0;
            background: #59aecc;
        }
.textVerticalCenter{
    background: #e0ee0d;
    width: 10%;
    height:50px;
    line-height: 50px;
}
<div class="verticalCenter">
    <div class = "textVerticalCenter">
        垂直居中
    </div>
</div>

文字居中.png

(3)使用flex实现垂直居中

设置主轴为垂直方向，设置主轴的对齐方式为居中
下面用flex实现了水平和垂直方向都居中
.flexVerticalCenter{
            height: 100px;
            display: flex;
            flex-direction: column; /*设置主轴为垂直方向*/
            justify-content: center;/*设置主轴对齐方式*/
            align-items: center;   /*设置交叉轴对齐方式*/
            background: #cc996a;
        }
<div class="flexVerticalCenter">
    <div style="background: #46ee24">
        使用flex实现居中
    </div>
    <div style="background: #cc4f28">
        使用flex实现居中
    </div>
</div>

flex实现垂直居中.png