參考：CSS: 常用的元素居中方法

? ? ? ? ?CSS居中布局總結

?

1.水平居中

（1）文本水平居中

?

text-align: center;

（2）塊級元素水平居中

①設置margin

margin: auto;

?

②display:inline-block+text-align:center

.parent {width: 400px;height: 400px;background-color: aquamarine;text-align: center;}.child {width: 100px;height: 100px;background-color: #43ff26;display: inline-block;}

這樣可以使一塊級元素擁有一些inline元素的特性。

③absolute+transform

.parent {position:relative;} .child {position:absolute;left:50%;transform:translateX(-50%);}

④?flex+justify-content

.parent {width: 400px;height: 400px;background-color: aquamarine;display: flex;justify-content: center;}

?

?

2.垂直居中

（1）文本垂直居中

①設置line-height和父元素高度一致，只適合單行文本的情況下。

（2）塊級元素垂直居中

①table-cell+vertical-align

.parent {display:table-cell;vertical-align:middle;}

優點：只需設置父節點，兼容性好

②absolute+transform

.parent {position:relative;} .child{position:absolute;top:50%;transform:translateY(-50%);}

?

③?flex+align-items

.parent {display:flex;align-items:center;}

?

?

3.水平垂直居中

（1）文本元素

text-align:center+line-height

（2）塊級元素

①inline-block+text-align+table-cell+vertical-align

.parent {text-align:center;display:table-cell;vertical-align:middle;}.child {display:inline-block;}

?

②absolute+transform

.parent {position:relative;} .child{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}

?

③flex+justify-content+align-items

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

④負margin(需精確計算長寬)

<div class="absolute_p1"><div class="absolute_c1"></div> </div> .absolute_p1 {position: relative;width: 200px; height: 200px; } .absolute_p1 .absolute_c1 {position: absolute; /* fixed 同理 */left: 50%; top: 50%;width: 100px; height: 100px;margin-left: -50px; margin-top: -50px; /* 需根據寬高計算偏移量 */ }

• 原理: 通過定位使元素左上角居中，再通過偏移值margin調整使元素中心居中
• 缺點：高度寬度需事先知道，得通過其來計算負margin(好煩)

⑤定位實現居中(不需計算偏移值)

<div class="absolute_p2"><div class="absolute_c2"></div> </div> .absolute_p2 {position: relative;width: 200px; height: 200px; } .absolute_p2 .absolute_c2 {position: absolute; /* fixed 同理 */left: 0; top: 0; bottom: 0; right: 0; /* 定位為 0 */width: 100px; height: 100px;margin: auto; /* 不用計算偏移量 */ }

原理: 原理我也不知道啊！估計定位都給0了，元素自己也不知道該去哪兒，只好待在原地不知所措...

?

轉載于:https://www.cnblogs.com/txwslyf/p/6894774.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

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