css居中的方法：1、水平居中，可以使用“text-align”針對塊級元素，“margin”針對塊級元素，“position”和“transform”針對塊級元素；2、垂直居中，可以使用“l(fā)ine-height”針對行內元素，“flexbox”針對塊級元素，“position”和“transform”針對塊級元素。

在Web設計中，居中是非常常見的需求，尤其是在布局中。CSS提供了不同的方法來實現(xiàn)居中，下面我們來看看其中最常見的幾種方法。

一、水平居中

1.使用text-align（針對塊級元素）

text-align屬性可以對塊級元素的內部文本實現(xiàn)水平居中，比如p、h1、h2等標簽，示例代碼如下：

立即學習“前端免費學習筆記（深入）”；

div {
?text-align: center;
}

2.使用margin（針對塊級元素）

margin屬性可以對塊級元素實現(xiàn)水平居中，將左右margin設置為auto即可，示例代碼如下：

div {
?margin: 0 auto;
}

3.使用position和transform（針對塊級元素）

position屬性和transform屬性可以對塊級元素實現(xiàn)水平居中，需要將position屬性設置為absolute或fixed，再使用transform屬性將元素向左平移50%。示例代碼如下：

div {
?position: absolute;
?left: 50%;
?transform: translateX(-50%);
}

二、垂直居中

1.使用line-height（針對行內元素）

line-height屬性可以對行內元素實現(xiàn)垂直居中，將line-height的值設置為容器的高度即可，示例代碼如下：

div {
?height: 100px;
?line-height: 100px;
}

2.使用flexbox（針對塊級元素）

flexbox是CSS3中引入的一種布局方式，可以輕松實現(xiàn)元素的垂直居中，需要在容器上設置display: flex，再使用align-items: center將元素垂直居中。示例代碼如下：

.container {
?display: flex;
?align-items: center;
?justify-content: center;
}

3.使用position和transform（針對塊級元素）

position屬性和transform屬性也可以實現(xiàn)元素的垂直居中，需要將position屬性設置為absolute或fixed，再使用transform屬性將元素向上平移50%。示例代碼如下：

div {
?position: absolute;
?top: 50%;
?transform: translateY(-50%);
}

總結：

以上就是CSS實現(xiàn)居中的幾種方法，它們各有優(yōu)缺點，在不同的場合下可以選擇合適的方法來實現(xiàn)目標。同時，現(xiàn)代瀏覽器對CSS3的支持越來越好，使用CSS3的flexbox布局也是一種非常方便的選擇。

以上就是css怎么居中的詳細內容，更多請關注php中文網(wǎng)其它相關文章！