純CSS的Div置中

利用inline-block的等高特性,搭配:before 或 :after 來取得container的高度

可適用於未知高度的內容div

HTML:

<div class="container">
  <div class="content">內容</div>
</div>

CSS:

 .container{
  width:400px;
  height:400px;
  text-align:center;
  border:1px solid  #000;
}
.container:before{
  height:100%;
  display:inline-block;
  vertical-align:middle;
  content:'';
}
.content{
  display:inline-block;
  vertical-align:middle;
  padding:10px;
  background-color:#aaa;
}
內容