方案一：flex布局【推荐】
给容器添加样式
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>
.box {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid gray;
width: 200px;
height: 100px;
}
.item {
width: 50px;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<span class="item">水平垂直居中</span>
</div>
</body>
</html>方案二：子绝父相 + transform （CSS3）
限制条件：浏览器需支持CSS3，比较老的浏览器不适用
给容器（父元素）添加样式
position: relative
给内部元素添加样式
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);方案三：子绝父相 + 自动外边距（指定高度和宽度）
给容器（父元素）添加样式
position: relative
给内部元素添加样式
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;方案四：子绝父相 + 负外边距 （知道宽度和高度 + 宽度和高度计算）不推荐
限制条件：需知道内部元素的宽度和高度
给容器（父元素）添加样式
position: relative
给内部元素添加样式
position: absolute;
left:50%;
margin-left:-内部元素宽度的一半;
top: 50%;
margin-top: -内部元素高度的一半;<!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>
.box {
margin: 30px 30px 0px 300px;
border: 1px solid gray;
height: 100px;
position: relative;
}
.item {
background-color: yellow;
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -25px;
width: 300px;
height: 50px;
}
</style>
</head>
<body>
<div class="box">
<span class="item">水平垂直居中 -- 子绝父相 + 负外边距</span>
</div>
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看