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;
}