文章主要介紹了CSS自適應(yīng)布局實(shí)現(xiàn)子元素項(xiàng)目整體居中，內(nèi)部項(xiàng)目左對(duì)齊，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，

日常工作時(shí)，我們可能遇到這樣一個(gè)布局：一個(gè)父元素框框（隨著瀏覽器大小自適應(yīng)寬度）里面有許多按鈕，然后這些按鈕（寬度固定）的整體需要在父元素內(nèi)居中對(duì)齊，而按鈕整體的內(nèi)容又是從左往右排列。這里提供一個(gè)解決方法，示例如下：

有如下代碼：

<div class="wrap">
    <button class="btn">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>
    <button class="btn">4</button>
    <button class="btn">5</button>
    <button class="btn">6</button>
    <button class="btn">7</button>
</div>

對(duì)應(yīng)的CSS為：

.wrap {
    border: 2px solid black;
    margin: 0 auto;
    padding: 10px;
    width: 40%;
}
.btn {
    outline: none;
    border: none;
    width: 180px;
    height: 30px;
    background-color: cornflowerblue;
    margin: 5px;
}

顯示的效果：

動(dòng)態(tài)變化寬度的情況：

可以看到，當(dāng)我們縮小瀏覽器窗口大小時(shí)，父元素（黑框）的寬度會(huì)動(dòng)態(tài)調(diào)整，其子元素也會(huì)根據(jù)父元素的寬度動(dòng)態(tài)排列，但是按鈕組在父容器中是左對(duì)齊的，我們想要讓這個(gè)整體保持居中，可以通過(guò)如下方式實(shí)現(xiàn)：

CSS代碼：

.wrap {
    border: 2px solid black;
    margin: 0 auto;
    padding: 10px;
    width: 40%;
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
    justify-content: center;
}
.btn {
    outline: none;
    border: none;
    width: 180px;
    height: 30px;
    background-color: cornflowerblue;
    margin: 5px;
}

將父元素display屬性設(shè)置為grid，然后grid列模板為自動(dòng)填充，寬度為200px（這里寬度比單個(gè)按鈕元素稍大一點(diǎn)即可），然后設(shè)置justify-content屬性值為center使內(nèi)容水平居中。效果如下：

動(dòng)態(tài)變化的效果：

可以看到，在寬度變化的過(guò)程中，子元素整體一直是保持居中的。

單純用CSS實(shí)現(xiàn)這樣的效果，我只想到用grid來(lái)實(shí)現(xiàn)了，若你有其他方法，歡迎留言，一同學(xué)習(xí)~

提示：grid目前的兼容性不是很好，如果需要支持較老的瀏覽器版本，慎用哦！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，