一、水平居中：行內元素解決方案居中元素：文字、鏈接以及其它行內元素（inline或inline-*類型的元素，如inline-block，inline-table，inline-flex）
解決方案：將inline元素包裹在一個display屬性為block的父級元素中，如div、nav，設置父級元素屬性text-align:center屬性即可。?HTML<div>文字元素</div>

<nav>
??<a?href="">鏈接元素01</a>
??<a?href="">鏈接元素02</a>
??<a?href="">鏈接元素03</a>
</nav>?CSS?nav,?div{
??text-align:?center;
}

?

二、水平居中：塊狀元素解決方案
居中元素：塊狀元素，如div，p，section等元素，即display屬性為block的元素
解決方案：添加margin-left，margin-right屬性值為auto即可，如：margin:0 auto;
注意：需要居中的塊狀元素需有固定的寬度，否則無法實現居中，因為占據100%的寬度。HTML<div?class="center">水平居中的塊狀元素</div>
<p?class="center">水平居中的塊狀元素</p>CSS?div,?p{
????width:?200px;??/*需要設置元素的寬度值*/
????height:?150px;
? ? color:#fff;
? ? background:?#222;
}
.center?{
????margin:?10px?auto;
}

?

三、水平居中：多個塊狀元素的解決方案
居中元素：“多個塊狀元素”水平橫向排列居中
解決方案：設置這幾個塊狀元素的display屬性為inline-block，并且設置父元素的text-align屬性為center即可。?
注意：如果要實現這幾個塊狀元素的垂直居中，使用上一節中的margin:0 auto屬性 即可。?HTML<div?class="center">水平居中的塊狀元素</div>
<div?class="center">水平居中的塊狀元素</div>

CSS

body?{
????text-align:?center;
}
/*頁面美化元素*/
div?{
????width:?100px;
????padding:?10px;
????height:?50px;
????background-color:?#222;
????color:?#fff;
}
.center?{
????display:?inline-block;
}

?

四、水平居中：多個塊狀元素解決方案（使用flex布局實現）
居中元素：多個塊狀元素水平橫向排列居中（使用flex布局實現）
解決方案：將多個塊狀元素的父級元素的display屬性設置為flex，并設置justify-content:center即可。
HTML<div?class="center">水平居中的塊狀元素</div>
<div?class="center">水平居中的塊狀元素</div>CSS?body?{
????display:?flex;
????justify-content:?center;
}

/*頁面美化元素*/
div{
????width:?100px;
????height:?50px;
????color:#fff;
????background:?#222;
????margin:?10px;
????padding:?10px;
}

?

轉載于:https://www.cnblogs.com/sun-mile-rain/p/4020246.html

總結

以上是生活随笔為你收集整理的CSS 水平居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。