1、通過(guò) margin 屬性調(diào)整 :

{ position: absolute; top: 50%; left: 50%; margin-left: 盒子的一半； margin-top: 盒子的一半; }

?

2、通過(guò) transform 屬性調(diào)整:

{ position: absolute; top: 50%; left: 50%; transform: translateX(-盒子的一半) translateY(-盒子的一半)； }

?

3、通過(guò)絕對(duì)定位：注意子絕父相（子元素絕對(duì)定位，父元素相對(duì)定位）

{ position: absolute; top: 0; left: 0; right: 0; bootom: 0; margin: auto; }

?

4、通過(guò)彈性盒子 ：

/* 父盒子 */ { display: flex; justify-content: center; align-items: center; }

轉(zhuǎn)載于:https://www.cnblogs.com/zhuyan0000/p/10826273.html

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的css实现元素居中的常见方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。