【轉載】在不肯定自身高度的狀況下，用 CSS 實現元素垂直居中的3種方法

做者：Jaskey Lam
連接：https://www.zhihu.com/question/20543196/answer/57757836
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

1.不知道本身高度和父容器高度的狀況下, 利用絕對定位只須要如下三行：

1.  
   parentElement{
2.  
   position:relative;
3.  
   }
4.  
    
5.  
   childElement{
6.  
   position: absolute;
7.  
   top: 50%;
8.  
   transform: translateY(-50%);
9.  
    
10.  
    }

2.若父容器下只有一個元素，且父元素設置了高度，則只須要使用相對定位便可

1.  
   parentElement{
2.  
   height:xxx;
3.  
   }
4.  
    
5.  
   .childElement {
6.  
   position: relative;
7.  
   top: 50%;
8.  
   transform: translateY(-50%);
9.  
   }

demo: Edit fiddle - JSFiddle

Flex 佈局：

不考慮兼容老式瀏覽器的話，用Flex佈局簡單直觀一勞永逸：

1.  
   parentElement{
2.  
   display:flex;/*Flex佈局*/
3.  
   display: -webkit-flex; /* Safari */
4.  
   align-items:center;/*指定垂直居中*/
5.  
   }

demo:  http://codepen.io/anon/pen/PZKZqe

 

 

 

做者：李天昭
連接：https://www.zhihu.com/question/20543196/answer/15432218
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

1. 表格居中
HTML：
<div id="box"><div id="content"></div></div>
CSS：
#box { display: table; height: 400px; background: #c00; }
#content { color: #fff; text-align: center; display: table-cell; vertical-align: middle; }
兼容性： http://caniuse.com/#search=table，除了IE6/7都支持 2. inline-block HTML: <div id="box"> <div id="content">我是內容<br />我也是內容</div> <div id="actor">我是演員</div> </div> CSS: #box { height: 400px; background: #c00;} #content, #actor { display: inline-block; vertical-align: middle;} #content { font-size: 12px; color: #fff;} #actor {height: 400px; font-size: 0;}