可以讓乙個盒子實現水平居中,需要滿足一下兩個條件:
必須是塊級元素。
盒子必須指定了寬度(width)
然後就給左右的外邊距都設定為auto,就可使塊級元素水平居中。
實際工作中常用這種方式進行網頁布局,示例**如下:
.header
定位 盒子寬高已知, position: absolute; left: 50%; top: 50%; margin-left:-自身一半寬度; margin-top: -自身一半高度。
定位 + transform ; 適用於 子盒子 寬高不定時;
flex 布局position: relative;
top: 50%; /*偏移*/
transform: translatey(-50%);
table-cell布局 父級 display: table-cell; vertical-align: middle;父級:
/*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...