CSS垂直置中布局方法

標籤：class   rem   div   對齊   nbsp   垂直置中   abs   比較   使用   

整理一下個人認為比較好的CSS垂直置中的布局方法。

1. 絕對位置+負值margin。

//長寬的設定只是為了說明，實際使用沒有限制<div id="container-outer">  <div id="container-inner"></div></div>

//CSS#container-outer {  width: 200rem;  height: 100rem;  position: relative;}#container-inner {  width: 100rem;  height: 50rem;  position: absolute;  top: 50%;  left: 50%;  margin-top: -25rem;  margin-left: -50rem;}

2. 高度為100%的inline-block的Before偽類為基準使之後的inline-block元素都可以以這個偽類vertical-align: middle對齊。

//長寬的設定只是為了說明，實際使用沒有限制<div id="container-outer">  <img id="container-inner"></div>

//CSS#container {  width: 200rem;  height: 100rem;}#container:before {  content: ‘‘;  display: inline-block;  vertical-align: middle;  height: 100%;    }#container-inner {  width: 100rem;  height: 50rem;  display: inline  vertical-align: middle;}

暫時記錄這兩個方法，當然還有位移的方法和方法1差不多。

之後有更好的方法再補充。

 

CSS垂直置中布局方法