共计 2196 个字符，预计需要花费 6 分钟才能阅读完成。
相信在工作中经常会遇到需要某某元素垂直水平居中的需求，下面总结一下实现方法
元素已知宽度
绝对定位 + margin 反向偏移
html
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width”>
<title>Sumon Test</title>
<div style=”background-color: yellow;
width: 300px;
height: 300px;
position: relative;
“>
<div style=”background-color: #F00;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
“>
</div>
</div>
</head>
<body>
</body>
</html>
元素未知宽度
绝对定位 + margin auto + 流体特性
html
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width”>
<title>Sumon Test</title>
<div style=”background-color: yellow;
width: 300px;
height: 300px;
position: relative;
“>
<div style=”background-color: #F00;
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
“>
</div>
</div>
</head>
<body>
</body>
</html>
Tips
当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性就发生了。
具有流体特性绝对定位元素的 margin:auto 的填充规则和普通流体元素一模一样：
1. 如果一侧定值，一侧 auto，auto 为剩余空间大小；
2. 如果两侧均是 auto, 则平分剩余空间；
绝对定位 + transform 反向偏移
html
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width”>
<title>Sumon Test</title>
<div style=”background-color: yellow;
width: 300px;
height: 300px;
position: relative;
“>
<div style=”background-color: #F00;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
“>
</div>
</div>
</head>
<body>
</body>
</html>
flex 布局
html
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width”>
<title>Sumon Test</title>
<div style=”background-color: yellow;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
“>
<div style=”background-color: #F00;
width: 100px;
height: 100px;
“>
</div>
</div>
</head>
<body>
</body>
</html>
Tips
1.justify-content 设置水平方向的元素位置
2.align-items 设置垂直方向的元素位置
table-cell 布局
html
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width”>
<title>Sumon Test</title>
<div style=”background-color: yellow;
width: 300px;
height: 300px;
display: table-cell;
vertical-align: middle;
text-align: center;
“>
<div style=”background-color: #F00;
width: 100px;
height: 100px;
display: inline-block;
“>
</div>
</div>
</head>
<body>
</body>
</html>
Tips
1.vertical-align 设置元素的垂直对齐方式
2.text-align 设置元素中的文本的水平对齐方式
以上就是我对 CSS 实现垂直水平居中的总结，如有异议欢迎评论留言。
