温馨提示：本文最后更新于
2024-10-24 07:23:32，某些文章具有时效性，若有错误或已失效，请在下方留言。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="cssstudy.css">
</head>
<body>
<div></div>
</body>
</html>
方案一
div绝对定位实现水平垂直居中
/*margin:auto实现绝对定位元素的居中*/
div {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
方案二
div绝对定位实现水平垂直居中
/*margin 负间距*/
div {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 50%;
top: 50%;
/*向左向上的偏移量为宽度以及高度的一半*/
margin-left: -100px;
margin-top: -100px;
}
方案三
div绝对定位实现水平垂直居中
/*transforms 变形*/
div {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
方案四
CSS不定宽高实现水平垂直居中(推荐使用)
/*flexbox 布局*/
.box {
height: 450px;
background: antiquewhite;
display: flex;
justify-content: center;
align-items: center;
}
.box>div {
background: green;
width: 200px;
height: 200px;
}
© 版权声明
THE END
暂无评论内容