【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )
在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%);
将绝对定位元素向左和向上移动自身宽度和高度的一半,从而实现居中效果。
评论已关闭