實現盒子水平垂直居中的10種方法

實現操作：

父：

子：

優點：比較好理解，相容性好

實現操作：

父：

子：

缺點：需要知道子元素的寬高

實現操作：

父：

子：

calc:任何長度值都可以使用calc()函式進行計算； calc()函式使用標準的數**算優先順序規則； 它支援 「+」, 「-」, 「*」, 「/」 運算

檢視calc教程：

優點：他的相容性依賴的是calc的相容性

缺點：同樣是需要知道子元素的寬高

實現操作：

父：

子：

這個方法不需要子元素固定寬高

修復絕對定位的問題，還可以使用css3新增的transform，transform的translate

屬性也可以設定百分比，其是相對於自身的寬和高，所以可以將translate設定為-50%，就可以做到居中了

缺點：ie8不支援, 屬性需要追加瀏覽器廠商字首, 可能干擾其他 transform 效果, 某些情形下會出現文字或元素邊界渲染模糊的現象.

只對文字有效果，對定寬高的div是沒有用的。所以在文字水平垂直居中時使用。

缺點：只對文字有效，只對單行文字有效，多行文字不可以

可以參考:

這種方法稍微有些複雜，writing-mode可以改變文字的顯示方向

通過table單元格的形式設

優點：tabel單元格中的內容天然就是垂直居中的，只要新增乙個水平居中屬性就好了

缺點：這個不是table的正確方法，不是很建議使用，但是也是可以實現的

父：

父：

缺點：pc端需要根據相容情況來判定

給父級設display:grid;

給子元素設align-self: center;justify-self: center;

缺點：相容不如flex，建議用flex

盒子垂直水平居中

1 定位 盒子寬高已知，position absolute left 50 top 50 margin left 自身一半寬度 margin top 自身一半高度 2 table cell布局 父級 display table cell vertical align middle 子級 margin...

盒子垂直水平居中

要設定內部盒子在外部盒子內垂直水平居中，可以有以下幾種做法 假設外部盒子為紅色，大小為10em 10em 內部盒子為黃色，大小為3em 3em。在調整位置之前，盒子情況如下 由於知道兩個盒子的大小，只要設定黃盒子的位置即可，首先設定黃盒子的position為absolute，再將黃盒子向右下方偏移紅...

如何實現盒子水平垂直居中？

1.transforms屬性的translate平移 position設定 子絕父相 transform translate 50 50 top 50 left 50 2.margin position設定 子絕父相 在父元素設定 margin 0 auto 在子元素設定 left 50 top 5...