<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 元素水平垂直居中</title>
<style>
/*参考：https://blog.youkuaiyun.com/weixin_44135121/article/details/91430443*/
body {
margin: 0;
padding: 0;
}
#father {
background: rgba(0, 0, 0, 0.7);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#son {
width: 90%;
height: 60%;
background: white;
border-radius: 30px;
margin: auto;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>
css 元素水平垂直居中.html
最新推荐文章于 2025-07-24 09:43:04 发布
本文详细介绍了如何使用CSS实现元素的水平垂直居中效果，通过设置父级元素为fixed定位并利用margin:auto属性，使子元素在页面中精确居中显示。此方法适用于创建弹窗、对话框等界面设计。
扫一扫
2257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
