CSS3新特性,讓文字在父佈局垂直居中顯示
阿新 • • 發佈:2019-02-07
做一個小專案,有這樣一個需求,站點的標題欄顯示標題的時候,想讓標題在父佈局中居中顯示,就像如下
在css3之前有這樣一個屬性可以控制文字的顯示效果
text-align : center
但實際前框並不是想象的那樣,原始碼如下
<div style="
width: 100%;
height: 100px;
background-color: black;
text-align: center;
color: white;
font-size: 30px"
>
this is title
</div>
效果如下
可以發現標題只是水平居中了,並沒有垂直居中。
剛才說了那只是css3之前的方法,也就是說text-align:center只能對水平居中有效,不能垂直居中。
OK,CSS3新特性可以做到水平垂直居中,先看原始碼吧!
<div style="
width: 100%;
height: 100px;
background-color:
gray;color: white;
font-size: 30px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;"
>
this is title
</div>
效果如下
在CSS3垂直居中方法如下:
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;