源代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<style>
.fu{background-color:pink;width:400px;height:400px;}
.zi{background-color:skyblue;width:100px;height:100px;}
</style>
</head>
<body>
<div class="fu">
<div class="zi"></div>
<div>
</body>
</html>
方法一:
.fu{
position: relative;
}
.zi{
position: absolute;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -50px;
}
方法二:
.fu{
position: relative;
}
.zi{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
方法三:
//添加以下样式(使用css3定义的新属性 IE10+)
.fu{display:flex;}
//将父元素设为弹性容器也可设为display:inline-flex;
//两者的区别是设为inline-flex该元素视为内联元素
.zi{margin:auto;}
方法四:
//使用css3定义的新属性 IE10+
.fu{
display:flex;
justify-content: center; //子元素水平方向居中
align-items: center;//子元素垂直方向居中
}
方法五:
//IE10+
.fu{
position: relative;
}
.zi{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
//使该元素分别向左和上移动宽高一半的距离
}