之前寫居中一般都是margin:atuto要麼就是彈性盒子，不得不說彈性盒子確實好用。不過今天就記錄一下另外兩種的居中方式。我們都知道元素居中有一種方式就是設定定位後left:50%然後transform:translatex(-50%)，這種方法也是比較常用的一種。但是今天講的居中方式和這個有點出入但是更簡單。
可以看到我的大盒子的居中是使用的margin:auto，小盒子也是margin:auto，那為什麼乙個是左右居中另外乙個就是上下左右都居中呢。
原因就是margin:auto居中的原理，因為margin:auto是根據元素的流來的，在上面的例子中大盒子是乙個標準的塊級元素，所以他的寬度預設是百分百的。
雖然大盒子看起來只有我設定的那麼寬，但是他的流還是預設百分之百，所以我設定了margin:auto之後它就會居中。
那麼小盒子也是同理，在定位之後我給了上下左右都為0，這樣就會將小盒子的流拉伸至大盒子的大小，這個時候我給小盒子設定margin:auto就會讓小盒子上下左右以大盒子為標準都居中。
第二種方式其實也用到了彈性盒子，但是比你設定主軸和副軸居中來的更為直接。
**如下：
當元素設定了彈性盒子之後他的子元素自動變為塊級元素，而該元素的副軸會被拉伸，所以呈現的效果和上面的一樣。
兩個多選框 select 之間值的左右上下移動
兩個多選框 select 之間值的左右上下移動 兩個多選框 select 之間值的左右上下移動的 請參考 option01 option02 option03 option04 option05 option06 option07 option08 option09 option10 兩個多選框 s...
將乙個塊級元素水平和垂直居中的方法
將乙個塊級元素水平居中的方法 要水平居中對齊乙個元素 如 可以使用 margin auto 文字在元素內居中對齊，可以使用 text align center 使用彈性盒模型 display flex justify content conter 使用絕對定位 position absolute l...
讓乙個塊級元素垂直居中的八種方法
最後 效果圖 設定父元素相對定位，子元素position absolute top 50 同時margin top值為 子元素高度的一半 因為設定top值時是相對於盒子頂部，所以想要居中還要往上移動半個盒子的高度才能實現。ie版本都可以相容，如下 效果圖 和上一種方法原理差不多，都是利用相對定位和絕...