第一种方法：position绝对定位 + CSS3里transform实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div元素水平垂直居中</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
background-color: #EAEAEA;
}
.box {
width: 200px;
height: 200px;
background-color: #1E90FF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
本方法涉及知识点复习：
1、* { ... }
符号* 相当于选择器，代表html所有的元素，包括html标签、body标签等。
代码中将页面中的所有元素的margin，padding均设置为0。并设置整个页面背景色为#EAEAEA（灰白色）。
2、利用到CSS3中的transform属性
.box { ... }中，将首先设置<div>盒子的宽度/长度均为200px，背景色为#1E90FF（湖蓝色）。
然后设置该元素的position属性为absolute绝对定位，此时<div>脱离文档流（绝对定位使元素的位置与文档流无关），并且相对于最近的祖先元素定位。
注意：此时的top和left都设置成50%，容易陷入误区，认为<div>已经处于页面的正中间？但并不是，此时布局如下图：
定位原点是左上角，而非图片中心
因此我们还需要利用transform属性，transform: translate(-50%, -50%);使图片相对自己左移/上移动自身长度的50%。
网友评论