1.如果是單行文字。
(子元素是塊級元素，則設定子元素的
line-height
等於父元素的高，可使子元素垂直居中與父元素
)
"en">"
">
這是一段要垂直水平居中的文字！
2、對於已知高度的塊級子元素，子元素採用絕對定位，
另一種的絕對定位：子元素不管是塊級，行內。未知高度的子元素，設定子元素
translate:移動，
transform
的乙個方法
通過 translate()
方法，元素從其當前位置移動，根據給定的
left（x
座標） 和
top（
y 座標） 位置引數：
用法transform: translate(50px, 100px);
適用：絕對定位為頁面布局沒有影響的情況下可以使用，並且子級的高度是已知的
"en">"
">
這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！
3、對於已知塊級子級元素的高度，而且不能用絕對定位來布局的情況，（利用乙個空的
div讓其
width
為100%
，高度為父元素的
50%。適用：對於絕對布局有影響，不能適用
position:absolute
的元素，可以用以下這種方法。思路是：用乙個塊級元素，設定已知大小，在讓其高度達到父級容器的一半大小，再把要居中的元素往上提半個高度。跟方法
2同理。
"en">"
">
"null
">
"content
">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧中吧~
5.在不管子元素是（行內，或者塊級）子元素未知高度的情況下，父級元素使用
或者父級使用
子級使用
又或者使用父級使用 flex布局
當只有單行時，align-content失效，align-items設定為center，items彼此之間的對齊方式。
"en">"
">
"content
">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~
或者父級使用：display: table;子級使用display: table-cell;"en
">"
">
"content
">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~
css實現水平居中和垂直居中的常見方式
我們在實際工作中常會遇到需要設定居中的場景，居中分為水平居中和垂直居中。針對不同的情況又有不同的實現方式，例如行內元素和塊狀元素。水平居中 行內元素 text align center 這個比較簡單 塊狀元素 定寬的塊狀元素通過設定左右margin為auto實現，例如margin 10px auto...
CSS水平垂直居中常見方法總結
1 元素水平居中 當然最好使的是 margin 0 auto 居中不好使的原因 1 元素沒有設定寬度，沒有寬度怎麼居中嘛！2 設定了寬度依然不好使，你設定的是行內元素吧，行內元素和塊元素的區別以及如何將行內元素轉換為塊元素請看我的另一篇文章！示例 1 class box class content ...
CSS水平垂直居中常見方法總結
當然最好使的是 margin 0 auto 居中不好使的原因 1 元素沒有設定寬度，沒有寬度怎麼居中！2 設定了寬度依然不好使，你設定的是行內元素吧，行內元素和塊元素的區別以及如何將行內元素轉換為塊元素請看我的另一篇文章！示例 1 class box class content 哇 居中了 div ...