【整理】如何使元素水平垂直居中

第一种:已知元素宽、高

兼容:IE6+

源码:

<title>css使元素垂直居中</title>
<style type="text/css">
.box{
    width: 200px;
    height: 200px;
    background-color: grey;
    /*css使元素垂直居中*/
    position: relative;
}
.box .center{
    width: 100px;
    height: 100px;
    background-color: #B5C8E8;
    /*css使元素垂直居中*/
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
</style>
<div class="box">
    <div class="center"></div>
</div>

 demo: 

第二种:元素宽、高未知

兼容:IE8+

源码:

<title>css使元素垂直居中</title>
<style type="text/css">
.box{
    width: 200px;
    height: 200px;
    background-color: grey;
    /*css使元素垂直居中*/
    display: table;
}
.box .center{
    width: 100px;
    text-align: center;
    background-color: #B5C8E8;
    /*css使元素垂直居中*/
    display: table-cell;
    vertical-align: middle;
    
}
</style>
<div class="box">
    <div class="center">我要居中</div>
</div>

demo: 

 要兼容IE6/7,需增加一个div,这个方法比较巧妙,利用了left、top的百分比值是相对于父元素的宽度这点特性

<title>css使元素垂直居中</title>
<style type="text/css">
.box{
    width: 200px;
    height: 200px;
    background-color: grey;
    /*css使元素垂直居中*/
    display: table;
    /*兼容IE6、7*/
    *position: relative;
}
.table-cell{
    /*css使元素垂直居中*/
    display: table-cell;
    vertical-align: middle;
    /*兼容IE6、7*/
    *position: absolute;
    *left: 50%;
    *top: 50%;
}
.box .center{
    width: 100px;
    text-align: center;
    background-color: #B5C8E8;
    /*css使元素垂直居中*/
    display: table-cell;
    vertical-align: middle;
    /*兼容IE6、7*/
    *position: relative;
    *left: -50%;
    *top: -50%;
}
</style>
<div class="box">
    <div class="table-cell">
       <div class="center">请在IE6/7下查看此demo</div>
    </div>
</div>

 demo:

  

第三种:已知元素宽、高,需要借助一个div将上面的空间撑开

兼容:IE6+

源码:

<title>css使元素垂直居中</title>
<style type="text/css">
.box{
    width: 200px;
    height: 200px;
    background-color: grey;
    /*css使元素垂直居中*/
}
.box .center{
    width: 100px;
    height: 100px;
    background-color: #B5C8E8;
    margin: 0 auto;
    text-align: center;
    /*css使元素垂直居中*/
}
.box .floater{
    height: 50%;
    /*设置下外边距为要居中的元素的高度的一半*/
    margin-bottom: -50px;
}
</style>
<div class="box">
    <div class="floater"></div>
    <div class="center"></div>
</div>

 demo:

第四种:元素宽、高未知,需要借助另一个元素的高度来实现居中,利用了vertical-align:middle的特性。

兼容:IE6+

源码:

<title>css使元素垂直居中</title>
<style type="text/css">
.box{
    width: 200px;
    height: 200px;
    background-color: grey;
    text-align: center;
    /*css使元素垂直居中*/
}
.box .center{
    background-color: #B5C8E8;
    /*css使元素垂直居中*/
    display: inline-block;
    vertical-align: middle;
    /*兼容IE6、7*/
    *display: inline;
    *zoom: 1;
}
.box .reference{
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    /*兼容IE6、7*/
    *display: inline;
    *zoom: 1;
}
</style>
<div class="box">
    <div class="reference"></div>
    <div class="center">我要居中</div>
</div>

 demo:

第五种:元素宽、高未知,设置父元素相对定位,该元素绝对定位,margin: auto;且距离四个方向的距离都为0;如果要居中的元素未设置宽高,这种方法会使该元素铺满它的父元素。

兼容:IE8+

源码:

<title>css使元素垂直居中</title>
<style type="text/css">
.box{
    width: 200px;
    height: 200px;
    background-color: grey;
    text-align: center;
    /*css使元素垂直居中*/
    position: relative;
}
.box .center{
    width: 100px;
    height: 100px;
    background-color: #B5C8E8;
    /*css使元素垂直居中*/
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
</style>
<div class="box">
    <div class="center"></div>
</div> 

demo:


第六种:元素宽、高未知,利用了translate内的百分比是相对于元素本身的宽高这个特性。

兼容:IE9+

源码:

<title>css使元素垂直居中</title>
<style type="text/css">
.box{
    width: 200px;
    height: 200px;
    background-color: grey;
    text-align: center;
    /*css使元素垂直居中*/
}
.box .center{
    background-color: #B5C8E8;
    /*css使元素垂直居中*/
    position: relative;
    left: 50%;
    top: 50%;
    /*translate内的百分比是相对于元素本身的宽高*/
    transform: translate(-50%, -50%);
}
</style>
<div class="box">
    <div class="center">我要居中</div>
</div>

demo:

原文地址:https://www.cnblogs.com/wangmeijian/p/4922144.html