可以讓乙個盒子實現水平居中，需要滿足一下兩個條件：
必須是塊級元素。
盒子必須指定了寬度（width）
然後就給左右的外邊距都設定為auto，就可使塊級元素水平居中。
實際工作中常用這種方式進行網頁布局，示例**如下：
.header定位 + transform ; 適用於 子盒子 寬高不定時；
position: relative;
top: 50%; /*偏移*/
transform: translatey(-50%);
父級：
/*flex 布局*/
display: flex;
/*實現垂直居中*/
align-items: center;
/*實現水平居中*/
justify-content: center;
不論內容有多少，不論行高是多少，總之都會整體垂直居中。
其實這就相當於模擬了table的布局屬性，display:table相當於，display:table-cell就相當於，我們不妨來看下，，在瀏覽器的預設屬性：
由上圖可以看出，的預設屬性是：display:table，的預設屬性是display:table-cell
多行居中 達到
多行居中
多行居中
多行居中
多行居中
多行文字垂直居中
單行文字垂直居中比較簡單，只需將 line height 屬性值與其父元素的 height 屬性值設為相等即可。如下所示 class text 這是第一段文字span class text 這是第二段文字span class text 這是第三段文字span class text 這是第四段文字sp...
如何實現多行文字垂直居中
css中的vertical align屬性只會對擁有valign特性的 x html標籤起作用，但是在css中還有乙個display屬性能夠模擬，所以我們可以使用這個屬性來讓模擬就可以使用vertical align了。注意，display table和display table cell的使用方法...
CSS多行文字垂直居中
今天需要將文字垂直居中，就是一行是垂直居中，多行也是垂直居中。效果如下 實現 同事提供 doctype html html head lang en meta charset utf 8 title title style listdiv listdivleft listdivleft span l...