让元素相对于父元素垂直水平居中的CSS

最新推荐文章于 2022-11-04 17:08:51 发布

转载最新推荐文章于 2022-11-04 17:08:51 发布 · 662 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wjx-blog/p/8669791.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用CSS实现元素在父容器内垂直和水平居中的方法。通过设置position为relative，结合top和left属性配合transform的translateY和translateX属性，可以精确地使子元素在父容器中居中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

垂直居中

position: relative;
top: 50%;
transform: translateY(-50%);

1、position: relative;

理解：relative是相对的意思，这里是相对于父元素

2、top: 50%;

理解：高度是50%，指的是父无素的高度的50%。

3、transform: translateY(-50%);

理解：向上移动自身元素高度的50%。

水平居中

position: relative;
left: 50%;
transform: translateX(-50%);

下面是示例代码：

<html>
<head>
</head>
<body>
<div style="height:500px; background-color:gray;">
    <div style="position:relative; top:50%;left:50%; transform:translateY(-50%) translateX(-50%); background-color:blue; width:200px; height:100px;">
    </div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/wjx-blog/p/8669791.html