CSS常用水平居中技巧
在網(wǎng)頁(yè)設(shè)計(jì)中，常常需要對(duì)元素進(jìn)行居中處理，而水平居中是其中一種常見(jiàn)需求，本文介紹幾種CSS常用水平居中技巧。
1. 使用text-align實(shí)現(xiàn)文本水平居中
使用text-align屬性來(lái)實(shí)現(xiàn)文本水平居中是比較簡(jiǎn)單且常用的方法，只需要將父容器的text-align屬性設(shè)置為“center”即可。

歡迎來(lái)到我的主頁(yè)

2. 使用display:flex實(shí)現(xiàn)水平居中
CSS3中的flex布局可以讓我們更加方便的進(jìn)行居中處理。只需要將父容器的display屬性設(shè)置為“flex”，并通過(guò)justify-content屬性來(lái)控制子元素在主軸方向上的布局。
.container{
display: flex;
justify-content: center;
}
.box{
width: 200px;
height: 100px;
}
在上述代碼中，父容器為.container，子元素為.box，子元素將在父容器水平方向上居中。
3. 使用margin實(shí)現(xiàn)水平居中
通過(guò)設(shè)置左右margin為“auto”可以實(shí)現(xiàn)元素水平居中，這種方法適用于元素為塊級(jí)元素的情況，需要注意的是，該方法需要設(shè)置元素的寬度。
.container{
width: 960px;
margin: 0 auto;
}
在上述代碼中，父容器為.container，設(shè)置了960px的寬度，并設(shè)置了左右margin為“auto”，從而實(shí)現(xiàn)了水平居中。
以上就是CSS常用的水平居中技巧。不同的情況下適用不同的方法，需要根據(jù)實(shí)際情況進(jìn)行選擇。