1、通過 margin 屬性調整 :

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

?

2、通過 transform 屬性調整:

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

?

3、通過絕對定位：注意子絕父相（子元素絕對定位，父元素相對定位）

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

?

4、通過彈性盒子 ：

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

轉載于:https://www.cnblogs.com/zhuyan0000/p/10826273.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

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