使用纯CSS解决垂直居中有哪些方案？

网友解答: 已知盒子具体宽度（适用于居中浮动元素）给父元素相对定位,给子元素绝对定位 left: 50%;top: 50%; margin-left: 。margin-left: -(宽

给父元素相对定位,给子元素绝对定位 left: 50%;top: 50%; margin-left: 。margin-left: -(宽度度/2)。 margin-top: -(高度/2)；

给父盒子相对定位, 给子盒子设定绝对定位 top、right、bottom、left全为0，此时当设置绝对定位四个方向都为0时，浏览器不知道你所处的位置，这时设置margin:auto,应验起到作用，但这个方法不到万不得已时，不要使用

为父级元素开启fllex布局 display:flex;

justify-content: center; //定义多根轴线的对齐方式（定义水平方向的位置）

align-items: center;//定义项目在交叉轴（垂直方向）的对齐方式

（不过这高大上的它，兼容性不好，不支持IE9及IE9以下）

为父亲开启相对定位position;relative;

为孩子开启绝对定位position:absolute;top:50%;left:50%;最后利用CSS3中的transform:translate( -50%,-50%); 就可以将盒子居中了（不兼容IE8及IE8以下）

父容器设置为display:table，子元素（垂直居中显示的元素）设置为 display:table-cell 。但是，这种方法不好，因为会破坏整体的布局，毕竟表格布局能不使用就不使用，会破坏整体的布局，不利于后期维护

好啦，就分享到这里，关于这些方法的进一步说明和展示，不出问题的话将会在19：00推送关于居中的详细介绍，若你们有更好的方法记得关注我并在评论区留言：）

css也有自带的居中属性

适用于文字，可在div中左右居中

文字上下居中（前提是已知盒子高度，50为盒子高度）

div1{width: 200px;margin: auto}

这样div1就会在父级中左右居中；

上下居中可用padding属性上下撑开。