方式一:绝对定位方式且已知宽高
position:absolute;
top:50%;
left:50%;
margin-top:-3em;
margin-left:-7em;
width:14em;
height:6em;
方式二:绝对定位+未知宽高+translate
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
//需要补充浏览器前缀
方式三:flex轻松搞定水平垂直居中(未知宽高)
display:flex;
align-items:center;//使内部元素垂直居中
justify-content:center;//使内部元素水平居中
例:
<style>
.box{
width: 400px;
height: 400px;
border: 1px solid orange;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.item{
width: 100px;
height: 200px;
background-color: orangered;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
运行图: