单列水平垂直居中篇

 

　　　　1.table-cell + vertical-align + text-align + inline-block

html：

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

css:

.container{display:table-cell; vertical-align:middle; text-align:center;}
.content{display:inline-block;}

效果图：

 

　　　　2.absolute

html:

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

css:

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

　　效果图：

 

　　　　3.flex

html：

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

　　css：

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

　　效果图：