CSS居中方式总结

行内元素

1.和其他元素都在同一行
2.高，行高及外边距和内边距部分可以改变
3.宽度只与内容有关
4.行内元素只能容纳文本或者其他行内元素
5.a,img,input,lable,select,sapn,textarea,font

块级元素

1.总是在新行上开始，占据一整行
2.高度，行高以及外边距和内边距都课控制
3.宽度始终与浏览器的宽度一样，与内容无关
4.可以容纳行内元素和其他块级元素
5.div,p,table,form,h1,h2,h3,dl,ol,ul,li

居中方式分为三种：

• 水平居中
• 垂直居中
• 水平垂直居中

水平居中

1.行内元素水平居中

利用text-align:center可以实现行内元素水平居中
对行内元素(inline)，行内块(inline-block)，行内表(inline-table)，inline-flex也有效果。

<div class="center-text">
    简单是稳定的前提。
</div>

div {
    height:60px;
    border: 2px dashed #f69c55;
}
.center-text {
    text-align: center;
}

2.块级元素水平居中

通过把固定宽度的块级元素的margin-left和margin-right设成auto,就可以使块级元素水平居中

<div>
    <p class="center-block">
    </p>
</div>

div {
    height:100px;
    border: 2px dashed #f69c55;
}
.center-block {
    margin: 0 auto;
    width: 8rem;
    padding:1rem;
    color:#fff;
    background:#000;
}

3.多块级元素水平居中

方法一：利用inline-block
通过改变块级元素为inline-block和父容器的text-align属性来实现多块级元素水平居中

<div id="app">
        <div class="center-block">
           第一个块级元素
        </div>
        <div class="center-block">
            第二个块级元素
        </div>
        <div class="center-block">
            第三个块级元素
        </div>
    </div>

#app {
    height:100px;
    border: 2px dashed #f69c55;
    text-align: center;
}
.center-block {
     
    width: 200px;
    padding:1rem;
    color:#fff;
    background:#000;
    display: inline-block;   
}

方法二：利用flex布局

    <div id="app">
        <div class="center-block">
            第一个块级元素
        </div>
        <div class="center-block">
            第二个块级元素
        </div>
        <div class="center-block">
            第三个块级元素
        </div>
    </div>

#app {
    height: 100px;
    border: 2px dashed #f69c55;
    display: flex;
    justify-content: center;
}

.center-block {
    width: 200px;
    padding: 1rem;
    color: #fff;
    background: #000;
}

垂直居中

1.单行行内元素垂直居中

通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中

  <div id="app">
            第一个块级元素
    </div>

#app {
    height: 100px;
    border: 2px dashed #f69c55;
    line-height: 100px;
}

2.多行元素垂直居中

方法一：利用表格布局
利用表格布局的vertical-align:middle可以实现子元素的垂直居中

<div class="center-table">
    <p class="v-cell">
        The more technology you learn,<br>
        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;
}

方法二：利用flex布局
利用flex布局实现垂直居中

<div class="center-flex">
    <p>
        The more technology you learn,<br>
        the more you realize how little you know.
    </p>
</div>

.center-flex {
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 2px dashed #f69c55;
}

3.块级元素垂直居中

固定高度的块级元素
 已知居中元素的高度和宽度，通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可实现垂直居中。

<div class="parent">
    <div class="child">世界上有 10 种人，懂二进制的和不懂二进制的。</div>
</div>

.parent {
    height: 140px;
    position: relative;
    border: 2px dashed #f69c55;
}
.child {
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px;
    color:#fff;
    background: #000;
}

未知高度的块级元素
 高度未知，借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中，部分浏览器可能存在兼容性问题。

 <div class="parent">
        <div class="child">世界上有 10 种人，懂二进制的和不懂二进制的。</div>
    </div>

.parent {
    height: 140px;
    position: relative;
    border: 2px dashed #f69c55;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: black;
    color: #fff;
    padding: 1rem;
    width: 12rem;
}

水平垂直居中

1.固定宽高水平垂直居中

利用margin，定位(多样，不再赘述)

2.未知宽高元素水平垂直居中

利用2D变化，在水平和垂直方向都反向平移宽高的一半

3.利用flex布局

 利用flex布局，其中justify-content用于设置或检索弹性盒子元素在主轴上方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴方向上的对齐方式。

后记

 借鉴自：https://www.cnblogs.com/ghq120/p/10939835.html
在此基础上稍加改动，如有想了解更多关于flex布局，可跳转自下面这个网页
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html