网页模版设计_btv北京新闻频道_简易网站制作_服务营销理论

时间:2025/7/10 12:55:31来源：https://blog.csdn.net/weixin_45596561/article/details/142463839 浏览次数:0次

⾏内元素⽔平垂直居中设置⽗级标签。⽔平居中： text-align: center 垂直居中： line-height：盒⼦⾼度

⽔平垂直都居中

<!DOCTYPE html>
<html>
<head><style>.container {position: relative;width: 200px;height: 200px;border: 1px solid black;}.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100px;height: 100px;background-color: blue;}</style>
</head>
<body><div class="container"><div class="child"></div></div>
</body>
</html>

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

这三个需要一起用实现居中

绝对定位 + 四个方向 margin: auto

<!DOCTYPE html>
<html>
<head><style>.container {position: relative;width: 200px;height: 200px;border: 1px solid black;}.child {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 100px;height: 100px;background-color: blue;}</style>
</head>
<body><div class="container"><div class="child"></div></div>
</body>
</html>

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;这5个需要一起用

flex 布局

<!DOCTYPE html>
<html>
<head><style>.container {display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;border: 1px solid black;}.child {width: 100px;height: 100px;background-color: blue;}</style>
</head>
<body><div class="container"><div class="child"></div></div>
</body>
</html>

display: flex;

justify-content: center;

align-items: center;这三个需要一起用

table-cell

<!DOCTYPE html>
<html>
<head><style>.container {display: table-cell;text-align: center;vertical-align: middle;width: 200px;height: 200px;border: 1px solid black;}.child {width: 100px;height: 100px;background-color: blue;}</style>
</head>
<body><div class="container"><div class="child"></div></div>
</body>
</html>

display: table-cell;

text-align: center;

vertical-align: middle;这三个需要一起用

关键字：网页模版设计_btv北京新闻频道_简易网站制作_服务营销理论

本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

责任编辑：