居中的方法有很多，比較難的是選擇合適的方法。
今天搜了一下，總結一下各種居中方法的優缺點。
演示效果
使用flexbox伸縮盒布局
優點：
缺點：缺點：現在比較常用的方法，top設定為50%，然後margin-top設定成 -（自身高度的一半）
優點：
缺點：移動裝置上經常會用到，特別是當你不知道父容器的大小和自身的大小的時候。
position
:absolute
;top:50
%;left:50
%;transform
:translate
(-50
%,-50
%);
優點：缺點：設定了寬高以後，下面的css**就能上下左右居中了呢~
top:0
;bottom:0
;left:0
;right:0
;position
:absolute
;margin
:auto
;
優點：缺點：一種小技巧， 設定乙個float div,高度50%,margin-bottom設定成為-（居中div的高度一半），然後居中div設定clear:both,mrgin:auto（左右居中）即可~~
優點：
缺點：深入了解 flexbox 伸縮盒模型
未知尺寸元素水平垂直居中
css div上下左右居中
通常我們用到的css布局都是左右居中，經典css寫法如下 body div 上面是經典的左右居中的css寫法，那麼像登入框那些比較小得div塊只是左右居中是否不是太美觀，如果上下左右都居中這是 body div上面的margin可以合併 margin 250px 0 0 250px 大概原理就是 布...
CSS 上下左右居中筆記
結果 2.彈性盒子flex justify content 內容對齊,屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線 main axis 對齊。justify content flex start flex end center space between space around align ...
CSS上下左右居中的幾種方法
1 absolute，margin auto container content 注意 當沒有指定內容塊的具體的高度和寬度時，內容塊會填滿剩餘空間。可以通過使用max height來限制高度，也可以通過 display table 來使高度由內容來決定，但是瀏覽器支援不是很好。2 relative，...