1、absolute，margin: auto
.container .content
注意: 當沒有指定內容塊的具體的高度和寬度時，內容塊會填滿剩餘空間。可以通過使用max-height來限制高度，也可以通過 display:table 來使高度由內容來決定，但是瀏覽器支援不是很好。
2、relative，left top 50%，負margin-left margin-top
.isnegative
缺點:需要知道具體的高度和寬度
3、relative，left top 50%，transform: translate(-50%,-50%)
.content
這裡translate的百分比是相對於自身的，所以高度是可變的
4、table-cell
.center-container.is-table .is-table .table-cell .is-table .center-block
注意: 需要新增最內層的div，並且給div指定寬度和margin:0 auto;來使div居中。
5、inline-block
.center-container.is-inline .center-container.is-inline:after,.is-inline .center-block .center-container.is-inline:after .is-inline .center-block
6、flex
// content
.container
最方便最簡單的方式，但是要注意瀏覽器的支援
7、display:flex和margin:auto
.box8.box8 span
8、display:-webkit-box
.box9
9、display:-webkit-box
這種方法，在 content 元素外插入乙個 div。設定此 divheight:50%; margin-bottom:-contentheight;。
content 清除浮動，並顯示在中間。
.floater .content
CSS 上下左右居中筆記
結果 2.彈性盒子flex justify content 內容對齊,屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線 main axis 對齊。justify content flex start flex end center space between space around align ...
CSS居中小談 上下左右居中
水平居中設定 行內元素 設定 text align center flex布局 設定display flex justify content center 靈活運用，注意相容性和字首 垂直居中設定 父元素高度確定的單行文字 內聯元素 設定 line height height 父元素高度確定的多行文...
上下左右居中的方法總結
居中的方法有很多，比較難的是選擇合適的方法。今天搜了一下，總結一下各種居中方法的優缺點。演示效果 使用flexbox伸縮盒布局 優點 缺點 缺點 現在比較常用的方法，top設定為50 然後margin top設定成 自身高度的一半 優點 缺點 移動裝置上經常會用到，特別是當你不知道父容器的大小和自身...