#html
<div class="container"> <div class="content">CSS3區塊垂直居中梅問題</div> </div>
#css
.container{
width: 50%;
height: 500px;
background: #FF5B27;
display: flex; /*顯示模式設為flex*/
}
.content{
width: 250px;
height: 80px;
background: #fff;
margin: auto;/*當在flex下，設為auto時，就會垂直與水平居中*/
display:flex;
align-items:center; /*文字水平居中*/
justify-content:center;/*文字垂直居中*/
}
#預覽
這時除了區塊居中外，就連區塊內的文字也會跟著一起居中。
#圖片居中
這時當圖片要居中時，只需把文字改成圖片即可。
#html
<div class="container"> <div class="content"><img src='img.jpg'></div> </div>
#預覽
[範例預覽] [範例下載]