核心提示：面试中会常问的元素垂直居中方法讲解!doctype htmlhtmlheadmeta charset=utf-8title元素居中/titlestylebody{padding: 0;margin: ...
面试中会常问的元素垂直居中方法讲解
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素居中</title>
<style>
body{
padding: 0;
margin: 0;
}
.box1{
position:absolute;
top:0;bottom:0;left:0;right:0;
margin:auto;
width:200px;height:200px;
background:aqua;
}
.box2{
display:table;margin:auto;
width:200px;height:100px;
background:yellow;
}
.box3{
position:absolute;top:50%;left:50%;
width:50px;height:50px;
transform:translate(-50%,-50%);
background:gray;
}
.Box{
display: flex;
height: 400px;
background:black;
}
.box4{
width: 250px;height: 250px;
margin: auto;
background-color: white;
}
.box5{
position:absolute;top:50%;left:50%;
width:100px;height:100px;
margin-left:-50px;margin-top:-50px;
background:red;opacity:0.6;
}
</style>
</head>
<p class="box1">1</p>
<p class="box2">2</p>
<p class="box3">3</p>
<p class="Box">
<p class="box4">4</p>
</p>
<p class="box5">5</p>
</html>
