【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )
warning:
这篇文章距离上次修改已过433天，其中的内容可能已经有所变动。
在CSS中，要将一个绝对定位的元素水平和垂直居中，可以设置元素的left和top属性为50%，然后通过负的margin值将元素向左和向上移动，使得元素的中心点与容器的中心点对齐。
以下是实现绝对定位元素水平和垂直居中的CSS代码示例：
.container {
position: relative;
width: 300px;
height: 200px;
background-color: #f0f0f0;
}
.centered {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #007bff;
}HTML结构：
<div class="container">
<div class="centered">
居中内容
</div>
</div>在这个例子中，.container是绝对定位元素的容器，.centered是需要居中的绝对定位元素。通过设置top: 50%; left: 50%;，将绝对定位元素的左上角置于容器的中心点，然后使用transform: translate(-50%, -50%);将绝对定位元素向左和向上移动自身宽度和高度的一半，从而实现居中效果。
评论已关闭