定义一个需要垂直居中的div元素，他的宽度和高度均为300px，背景色为橙色。
margin: 0 auto;/*水平居中*/
第一种方法：可以使用margin-top把div往上偏移
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>index</title>
<style>
html,body {
width: 100%;/*他们默认是为0*/
height: 100%;
margin: 0; /* 把margin和padding设置为0,如果不清除默认样式的话,会出现滚动条*/
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto;/*水平居中*/
position: relative;/*脱离文档流*/
top: 50%;/*偏移 由于不知道父元素（即body）的具体高度，所以，是不可以通过具体像素来偏移的，而应该用百分数*/
margin-top: -150px;/*负数向上偏移*/
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
注：1、由于position的值默认为static（静止的、不可以移动的），元素在文档流里是从上往下、从左到右紧密的布局的，我们不可以直接通过top、left等属性改变它的偏移。
2、所以，想要移动元素的位置，就要把position设置为不是static的其他值，如relative,absolute,fixed等。
3、relative是不会使元素脱离文档流的，absolute和fixed则会。也就是说，relative会占据着移动之前的位置，但是absolute和fixed就不会。
第二种方法：
CSS3的transform属性也可以实现这个功能，通过设置div的transform: translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto;/*水平居中*/
position: relative; top: 50%;/*偏移*/
transform: translateY(-50%);
}
第三种方法：flex弹性布局
<style>
html,body {
width: 100%;
height: 100%;
margin: 0; padding: 0;
}
body {
display: flex;
align-items: center;/*定义body的元素垂直居中*/
justify-content: center;/*定义body的里的元素水平居中*/
}
.content {
width: 300px;
height: 300px;
background: orange;
}
</style>
网友评论