div水平垂直居中的方法

在平时开发过程中我们经常会对元素设置水平垂直居中，以下整理了六种方法：

方法一：

绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative）
如下图

图一

代码如下：
html

<div class="parent">
    我是父元素
    <div class="child">
        我是子元素
    </div>
</div>

css

.parent {
    position: relative;
    width: 500px;
    height: 500px;
    background: #cccccc;
}

.child {
    padding: 50px;
    background: red;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

方法二：

绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值
图片展示：如方法一的图片展示
代码如下：
html

<div class="parent">
    我是父元素
    <div class="child">
        我是子元素
    </div>
</div>

css

.parent {
    position: relative;
    width: 500px;
    height: 500px;
    background: #cccccc;
}

.child {
    width:200px;
    height: 200px;
    background:red;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-100px; /*margin值为当前div宽度一半的负值*/
    margin-top:-100px; /*margin值为当前div宽度一半的负值*/
}

方法三：

绝对定位下top left right bottom 都设置为0
图片展示：如方法一的图片展示
代码如下：
html

<div class="parent">
    我是父元素
    <div class="child">
        我是子元素
    </div>
</div>

css

.parent {
    position: relative;
    width: 500px;
    height: 500px;
    background: #cccccc;
}

.child {
    /*可以不知道其宽高*/
    width: 200px;
    height: 200px;
    background: red;
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

方法四：

flex布局方法：当前div的父级添加flex css样式
图片展示：

图二

代码如下：
html

<div class="parent">
    <div class="child">
        我是子元素
    </div>
</div>

css

.parent {
    height: 500px;
    background: #cccccc;
    -webkit-display:flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:center;
    justify-content:center;
}

.child {
    width: 200px;
    height: 200px;
    background: red;
}

方法五：

table-cell实现水平垂直居中: table-cell middle center组合使用
图片展示：如方法四的图片展示
代码如下：
html

<div class="parent">
    <div class="child">
        我是子元素
    </div>
</div>

css

.parent {
    height: 500px;
    width: 500px;
    background: #cccccc;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.child {
    display: inline-block; /*子元素是行内块元素*/
    width: 200px;
    height: 200px;
    background: red;
}

方法六：

绝对定位：calc() 函数动态计算实现水平垂直居中
图片展示：如方法四的图片展示
代码如下：
html

<div class="parent">
    <div class="child">
        我是子元素
    </div>
</div>

css

.parent {
    position: relative;
    width: 400px;
    height: 300px;
    background: #cccccc;
}

.child {
    position: absolute;
    background: red;
    width: 200px;
    height: 120px;
    left:calc((400px - 200px)/2); /* (父级的长度-子级的长度)/2 */
    top:calc((300px - 120px)/2); /* (父级的高度度-子级的高度)/2 */
    left:-webkit-calc((400px - 200px)/2);
    top:-webkit-calc((300px - 120px)/2);
    left:-moz-calc((400px - 200px)/2);
    top:-moz-calc((300px - 120px)/2);
}

最后编辑于：2020.08.16 17:13:09