子元素在父元素中水平垂直居中的六种方法

这里介绍六种方法使子元素在父元素中水平垂直居中，并且分析其优缺点。

目录

• 定位：三种
• display: flex
• JavaScript
• display: table-cell

首先给出页面结构和默认背景色：
（由于在浏览器中的显示结果都是水平垂直居中，所以就不附加运行图了。）

基础 HTML

<div class="parent">
    <div class="child">child</div>
</div>

基础 CSS

* {
    margin: 0;
    padding: 0;
}

.parent {
	background-color: pink;
}

.child {
    background-color: lightseagreen;
}

定位实现1

CSS

.parent {
    position: relative;
    width: 200px;
    height: 200px;
}

.child {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

优缺点：

• 缺点：必须知道.child元素的宽高值，而且必须有固定的宽高值。

定位实现2

CSS

.parent {
    position: relative;
    width: 200px;
    height: 200px;
}

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

优缺点：

• 优点：不需要知道.child的宽高值，同时不需要设置其宽高值，可由内容自动撑开。
• 缺点：兼容性问题。

定位实现3

CSS

.parent {
    position: relative;
    width: 200px;
    height: 200px;
}

.child {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

优缺点：

• 优点：不需要知道.child的宽高。
• 缺点：必须要有固定的宽高值，否则会在没有宽高值的方向拉伸至占满整个父元素。

display: flex 实现

CSS

.parent {
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

优缺点：

• 优点：不需要知道.child的宽高值，同时不需要设置其宽高值，可由内容自动撑开。
• 缺点：兼容性问题。

JavaScript 实现

首先可以选择性的添加元素的宽高，只为了便于观察，实际上可以省略CSS：

CSS

.parent {
    width: 200px;
    height: 200px;
}

JavaScript

window.onload = function() {
    let parent = document.querySelector(".parent"),
        child = document.querySelector(".child");
    
    parent.style.position = "relative";
    child.style.position = "absolute";
    child.style.left = (parent.offsetWidth - child.offsetWidth) / 2 + 'px';
    child.style.top = (parent.offsetHeight - child.offsetHeight) / 2 + 'px';
    console.log(child.offsetHeight);
}

优缺点：

• 优点：直接操作DOM来获取宽高，所以不需要设置宽高。
• 缺点：没有直接使用CSS性能好。

display: table-cell 实现

.parent {
    width: 200px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.child {
    display: inline-block;
}

优缺点：
这种方式很少用，并且.parent元素的宽高值不能设置为百分比。

总结

在开发中，实际上我们已经不怎么需要考虑兼容性问题了，所以个人感觉使用display: flex的方式就很简洁实用。

如果还不了解弹性盒布局，这里附加阮一峰的flex 布局教程，或者可以访问链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html。