DIV CSS 佈局教程網

第一種居中方式：

使用margin:auto;

這應該是使用最多的居中方式了，但也有著局限性，居中的元素需要設置寬度，而且是塊元素才行，並且只能實現水平居中，這個方法的原理是讓浏覽器自動去計算左右邊距從而實現居中；

<div class="big">
    <div class="small"></div>
</div>
.big{
        width: 200px;
        height: 100px;
        background: blue;

    }
    .small{
        width: 50px;
        height: 50px;
        background: orange;
        margin: 0 auto;
    }

第二種居中方式：

使用text-align:center實現居中，這種居中方式對於容器內的圖片，文字能夠很方便的實現居中。直接給父元素設置text-align:center就行；

第三種居中方式：

利用table-cell實現居中，這種方法可以實現水平垂直居中，但是需要外套一層標簽；IE8+有效

<div class="big">
        <div class="big-small">
            <div class="small"></div>
        </div>
    </div>
.big{
        width: 200px;
        height: 100px;
        background: blue;
        display: table;

    }
    .big-small{
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .small{
        width: 50px;
        height: 50px;
        background: orange;
        margin: 0 auto;
    }

第四種居中方式：

使用position:absolute居中；可以實現水平垂直居中；

浏覽器兼容性好，但是必須顯式聲明外部容器元素的height;來看一下代碼：

<div class="big">
        <div class="small"></div>
    </div>

.big{
        position: relative;
        width: 200px;
        min-height: 100px;
        background: blue;
    }
    
    .small{
        width: 50px;
        height: 50px;
        background: orange;
        position: absolute;
        top: 0;left: 0;bottom: 0;right: 0;margin: auto;
    }

第五種居中方式：

使用css translate居中，同樣可以實現水平垂直居中；但是使用transform需要加前綴，只支持IE9+，外部容器需要設置高度，如果內容包含文字，文字可能出現模糊；

<div class="big">
        <div class="small"></div>
    </div>

.big{
        position: relative;
        width: 200px;
        min-height: 100px;
        background: blue;
    }
    
    .small{
        width: 50px;
        height: 50px;
        background: orange;
        position: absolute;
        transform: translate(-50%,-50%);
        top: 50%;left: 50%;
    }

這種方法實現的原理是：首先讓需要居中的元素在容器內絕對定位，然後設置top:50%;left:50%;從而讓元素距離頂部為容器的一半高度，距離左邊為容器的寬度的一半，然後使用translate使元素向左向上偏移自身的寬高的一半實現居中；

第六種方式：

使用flexbox居中；給父容器設置display:flex;這種方法比較簡單，而且新版本浏覽器都支持。

<div class="big">
        <div class="small">我就是要這種</div>
    </div>

.big{
        position: relative;
        width: 400px;
        height: 100px;
        background: blue;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .small{
        width: 100px;
        height: 50px;
        background: orange;
        
    }

第七種方式：

使用calc動態計算實現居中；同樣可以實現水平垂直居中

.big{
        position: relative;
        width: 400px;
        height: 100px;
        background: blue;
        
    }
    
    .small{
        width: 40%;
        height: 50px;
        background: orange;
        position: absolute;
        top: calc(50% - 20%);
        left: calc(50% - 20%);   
    }

如果只有50%，內部元素的左上角在容器的中心，明顯不符合，所以還要讓元素向左向上移動自身的一半，從而實現居中。注意：calc(50% - 20%);當是一個計算式的時候，減號左右需要一個空格，否則無法識別哦；

參考博客：

何問起