11种水平垂直居中方法

绝对定位;

利用父元素相对定位和子元素绝对定位进行水平垂直居中，根据是否知道子元素宽高，使用数值或者百分比的方式进行定位

1.通过设置四向为0和margin: auto实现。

.father{width:100px;height:100px;background-color: grey;position: relative;}

.child{width:50px;height:20px;background-color: red;

position: absolute;left:0;right:0;top:0;bottom:0;margin: auto;}

2.通过设置left和top使child左上角位置移动到中间，然后再移动自身宽高一般使child中心至中间。未知宽高元素水平垂直居中

.father{width:100px;height:100px;background-color: grey;position: relative;}  .child{width:50px;height:20px;background-color: red;position: absolute;left:50%;top:50%;margin: -10px-25px;}

---

.father{width:100px;height:100px;background-color: grey;position: relative;}

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

总结

这几种方法使用了绝对定位，margin或者transform来使子元素水平垂直居中，根据是否知道具体宽高来使用margin或者transform。

弹性盒子

.father{width:100px;height:100px;background-color: grey;display: flex;}

.child{width:50px;height:20px;background-color: red;margin: auto;}

---

.father{width:100px;height:100px;background-color: grey;display: flex;justify-content: center;align-items:center;}

.child{width:50px;height:20px;background-color: red;}

---

table-cell：使用了table-cell以及行内块元素来实现

.father{width:100px;height:100px;background-color: grey;display: table-cell;text-align:center;vertical-align: middle;}

.child{display:inline-block;width:50px;height:20px;background-color: red;}

屏幕上水平垂直居中

屏幕上水平垂直居中十分常用，常规的登录及注册页面都需要用到。要保证较好的兼容性，还需要用到表布局。

.outer {

    display: table;

    position: absolute;

    height: 100%;

    width: 100%;

}

.middle {

    display: table-cell;

    vertical-align: middle;

}

.inner {

    margin-left: auto;

    margin-right: auto;

    width: 400px;

}