css实现div水平垂直居中

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

中秋快到了，祝大家中秋快乐。

平时大家写bug过程中肯定会遇到让div框水平或者垂直居中，然而有时候能居中，有时候不能居中。我把平时遇到的一些方法写出来，如果对你有用，那便是晴天。

1、text-align: center;

text-align: center;

这个是最简单的了，实现文本水平居中。

2、margin： 0 auto;

0为上下边距为0，auto为左右边距自适应，于是变实现了水平居中。高度固定时，加上line-height就能实现垂直居中。代码如下：

margin: 0 auto;
height: 100px;
line-height: 100px;

3、子元素基于父元素实现居中

采用绝对定位，使子div框定位跟着父div框，再让子div框左右边距自适应，于是边形成了水平垂直居中。

效果如图1所示。

图1

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent {
width: 200px;
height: 200px;
border: 1px red solid;
margin:0 auto;
position: relative
}
.child {
width: 100px;
height: 100px;
border: 1px red solid;
position:absolute;
left: 0;
right: 0;
top:0;
bottom:0;
margin-left: auto;
margin-right: auto;
margin-top:auto;
margin-bottom:auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>