html 元素垂直水平居中

1、 不定寬高元素水平垂直居中

一、transform: translate()

<div class="wrapper"> 
    <p class="center">水平垂直居中</p>
</div>

.wrapper{   
    background-color: #eee;   
    height:200px; 
} 
.center{    
    position: relative;   
    width: 300px;   
    padding: 10px 20px;   
    background-color: #2c3e50;   
    color: #fff;   
    left: 50%;   
    right: 50%;   
    transform: translate(-50%, -50%); 
}

缺點：IE9如下不兼容

二、flex 佈局，利用justify-content和align-items 實現居中

<div class="wrapper">   
<p class="center3">水平垂直居中</p> 
</div> 

.wrapper{ 
    height:200px;   
    background-color: #eee;   
    display: flex;   
    justify-content: center;   
    align-items: center; 
} 
.center2 {   
    position: relative;   
    width: 300px;   
    padding: 10px 20px;   
    background-color: #2c3e50;   
    color: #fff; 
}

三、使用table+table-cell實現垂直居中，display:inline-block;或margin: auto;實現水平居中

<div class="wrapper">  
    <div class="content">     
        <p class="center3">水平垂直居中</p>  
    </div>
</div> 

.wrapper{   
    background-color: #eee;   
    height: 200px;   
    width: 100%;   
    display: table; 
} 
.content {   
    display: table-cell;   
    text-align: center;   
    vertical-align: middle; 
} 
.center3 {   
    display: inline-block;   
    width: 300px;   
    padding: 10px 20px;   
    background-color: #2c3e50;   
    color: #fff; 
}

四、僞元素：after, :before 使用inline-block+ vertical-align:middle 對齊僞元素

<div class="wrapper">   
    <p class="center4">水平垂直居中</p> 
</div> 
.wrapper {   
    background-color: #eee;   
    height: 200px;   
    width: 100%;   
    position: relative; 
} 
.wrapper:after {   
    content: '';   
    display: inline-block;   
    vertical-align: middle;  
    height: 100%; 
} 
.center4 {   
    background-color:#2c3e50;   
    padding: 10px 20px;   
    color:#fff;   
    display: inline-block; 
}

五、writing-mode: 改變文字的顯示方向

<div class="wrapper">   
    <div class="content">       
        <p class="center5">水平垂直居中</p>   
    </div> 
</div>

.wrapper {   
    background-color:#eee;   
    width: 100%;   
    height: 200px;   
    writing-mode: vertical-lr; 
} 
.content {   
    writing-mode: horizontal-tb;   
    display: inline-block;   
    width: 100%; 
} 
.center5 {   
    background-color:#2c3e50;   
    padding: 10px 20px;   
    color:#fff;   
    display: inline-block;   
    margin: auto;   
    text-align: left; 
}

2、 固定寬高元素水平垂直居中

六、absolute+ 負margin

<div class="wrapper">     
    <p class="center6">水平垂直居中</p>
</div> 
 .wrapper {   
     background-color: #eee;   
     height: 200px;   
     width: 100%;   
     position: relative; 
 } 
 .center6{   
     background-color: #2c3e50;   
     color: #fff;   
     width: 300px;   
     height: 50px;   
     line-height: 50px;   
     position: absolute;   
     top: 50%;   
     left: 50%;   
     margin-left: -150px;   
     margin-top: -25px; 
 }

設置絕對定位，left:50%; top: 50%;使當前元素的左上角處於父元素的中心位置， 再利用負margin使其中心位於父元素的中心。

七、absolute+ 上下左右等值

<div class="wrapper">     
    <p class="center7">水平垂直居中</p> 
</div> 
.wrapper {   
    background-color: #eee;   
    height: 200px;   
    width: 100%;   
    position: relative; 
}
.center7 {   
    background-color: #2c3e50;   
    color: #fff;  
    width: 300px;   
    height: 50px;   
    line-height: 50px;   
    position: absolute;   
    top: 0;   
    left: 0;   
    right: 0;   
    bottom: 0;   
    margin: auto; 
}