<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div垂直水平居中</title>
<style>
div {
padding: 16px 32px 24px;
position: absolute; /* 绝对定位 */
box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 20%), 0px 5px 8px 0px rgb(0 0 0 / 14%), 0px 1px 14px 0px rgb(0 0 0 / 12%);
background-color: skyblue;
width: 400px;
height: 400px;
}
div {
top: 50%; /* 向右移动屏幕宽度50%的距离 */
left: 50%; /* 向下移动屏幕高度50%的距离 */
transform: translate(-50%, -50%); /* 向左移动自身宽度50%的距离， 向上移动自身50%的距离 */
}
</style>
</head>
<body>
<div>你好。这是一个 DIV 元素。</div>
</body>
</html>
效果如下图：
标签：居中,移动,50%,垂直,rgb,div,0px From： https://www.cnblogs.com/yuandaguangming/p/16932078.html