css中实现元素垂直居中的实用方法，兼容ie8
2020-11-03 本文已影响0人
mudssky
01.已知元素宽高，50%绝对定位+负margin
这个方法可以兼容ie5；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
position:relative;
width:800px;
height:800px;
background-color:red;
}
.box{
background-color: gold;
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
02.未知元素宽高 margin auto
比01法的通用性要好一些
但是这个方法只有ie8以上能够正常显示。
定位后使用下面两句。
left:0;right:0;top:0;bottom:0;
margin:auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
position:relative;
width:800px;
height:800px;
background-color:red;
}
.box{
background-color: gold;
width:200px;
height:200px;
position:absolute;
left:0;right:0;top:0;bottom:0;
margin:auto;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
03.flex布局
flex属性只能在ie10以上的浏览器上使用。
比较简单好用，这个布局方法可以兼顾移动端的适配。
父容器添加下面几行即可。
justify-content是容器对齐方向上的布局，默认是水平方向
align-items是定义交叉轴上的对齐方式，当容器方向为水平row时，它调节垂直方向上的布局。
display: flex; justify-content: center; align-items:center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
display: flex;
justify-content: center;
align-items:center;
width:800px;
height:800px;
background-color:red;
}
.box{
background-color: gold;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
