定位在中心的两种做法

21fanqie · 发表于 2024-7-27 22:34:31

定位在中心的两种做法

未知宽高实现盒子水平垂直居中，通常使用定位以及translate完成。参考下面例子：

 <div class="box">
        <div class="box1">
            啦啦啦啦啦啦啦啦啦啦
        </div>
    </div>

添加样式：

 .box {
        border: 1px solid #00ee00;
        height: 300px;
        position: relative;

    }

    .box1 {
        border: 1px solid red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

技术点的解释：

1、利用父元素设置相对定位，子元素设置绝对定位，那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%，使元素的左上角在父元素中心点的位置。
3、然后再用css3属性translate位移，给上和左都位移-50%距离，就能达到垂直水平居中的效果。

21fanqie · 发表于 2024-7-27 22:38:00

<body>
<div class="box">
<div class="box1"></div>
</div>
</body>

复制代码

要实现子元素相对于父元素垂直水平居中,我们只需要输入以下代码：

<style>
.box {
border: 1px solid #00ee00;
height: 300px;
position: relative;/*父元素相对定位*/}
.box1 {
position: absolute;  /*子元素绝对定位*/
top: 50%;  /* top值为50%*/
left: 50%;  /* Left值为50% */
margin: -100px 0 0 -100px;  /* margin-top的值为负的高度的一半， margin-Left的值为负的宽度的一半*/
width: 200px;
height: 200px;
border: 1px solid red;}
</style>

技术点的解释：
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%，使元素的左上角在父元素中心点的位置。

3、然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。

		自动登录	找回密码
密码			立即注册

[CSS] 定位在中心的两种做法

相关帖子