盒子水平居中的幾種方案

這種需求在我之前的專案當中是非常常見的剛開始的時候我是用position定位的方式來實現的，後來隨著css3的興起，display:flex的方式尤其是在移動端開發的時候來實現它是非常強大的，然後有一段時間我在看部落格的時候發現display:table-cell的方式雖然不常用但是也可以實現，當然還有position+calc計算的方式，js方式，grid網格布局方式都可以實現

absolute + 負margin(子盒子寬高的一半)（一定要知道子元素的寬高）

.parent

.child

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

absolute + margin auto 有寬高但不需要考慮

.parent

.child

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

absolute + transform（子盒子有或沒有寬高的時候都適用）

.parent

.child

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

.parent

.child

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

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

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

.parent

.child

class

="parent"
>
class
="child"
>
div>
div>

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

body

#box

lethtml
= document.documentelement,
winw =
html
.clientwidth,
winh =
html
.clientheight,
boxw = box.offsetwidth,
boxh = box.offsetheight;
box.style.position =
"absolute"
; box.style.left =
(winw - boxw)/2
+'px'
; box.style.top =
(winh - boxh)/2
+'px'
<
/script>

"box"

>
div>

.parent

.child

.parent

.child

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

移動端水平垂直居中 盒子垂直水平居中方案

盒子垂直水平居中的需求在專案中可以說是非常常見的，我在開發過程中常用的以下幾種方法 首先，做一下基礎的布局 定位利用絕對定位使得盒子在父容器中水平垂直居中，是簡單有效的方法，在實際開發中用的很多 container box 但是這種方法在子元素寬高不確定的情況下就不適用了。由於 css3 的出現，有...

盒子垂直水平居中

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，再將黃盒子向右下方偏移紅...