单列垂直居中篇

 

　　　　1.vertical-align

html:

<div class="container"> 
    <div class="content">我是单列垂直居中哦</div> 
</div>

　css：

.container{display:table-cell;vertical-align:middle;height:20px;}
/*
.container{display:inline-block;vertical-align:middle;line-height:20px;}
*/

　　效果图：

 

　　　　2.absolute

html：

<div class="container"> 
    <div class="content">我是单列垂直居中哦</div> 
</div>

　css：

.container{position:relative;}
.content{positon:absolute; top:50%; transform:translate(0,-50%);}

　　效果图：

 

　　3.flex

html：

<div class="container"> 
    <div class="content">我是单列垂直居中哦</div> 
</div>

css：

.container{display:flex; align-items:center;}

　　效果图：