一、對行級元素水平垂直居中
text-align:center;
heiht與line-height的值一樣
二、對塊級元素垂直居中對齊
（1）flex布局
.parent（2）父元素高度固定（2.1） position 子元素已知寬度
父元素設定為：position: relative;
子元素設定為：position: absolute;
距上50%，據左50%，然後減去元素自身寬度的距離就可以實現 （子元素寬高已知）
.parent（2.2）position transform 子元素寬高位置.child1
.div1（2.3）利用css的margin設定為auto讓瀏覽器自己幫我們水平和垂直居中。.child1
.div2（3）父元素高度不固定父元素的padding-top和padding-bottom一樣.child2
三、浮動元素水平垂直居中
解決方法：
垂直方向居中直接在父元素設定：display: table-cell;vertical-align: middle;
以下是水平方向居中的幾種方法：
（1）水平居中需要在浮動元素外面再巢狀一層div，
（2）寬度不固定的浮動元素------通過定位和left
同樣需要在浮動元素外面再巢狀一層div
#container#content
#son
CSS水平和垂直居中
parent.son.parent son.parent1 transform 絕對定位，left50 向左平移 50 son2 margin left 絕對定位，left50 margin left 0.5 子元素寬度 注 此方法必須知道子元素寬度 son3 left right 0 son.pa...
如何使元素垂直水平居中
在css中使元素垂直水平居中十分常見，那麼我來拋磚引玉，分享幾種我知道的方法 1.彈性盒方法 flex布局 元素 display flex justify content center align items center 2.定位 transform 父元素 position relative 子...
CSS詳解水平和垂直居中
text align center margin 0 auto 設定父元素flex布局 display flex justify content center 1.子元素使用相同內邊距撐開父元素 padding top 30px padding bottom 30px 2.使高度和行高相等 字元本來...