区块元素的居中

最新推荐文章于 2024-01-15 19:13:20 发布

小可同学啊

最新推荐文章于 2024-01-15 19:13:20 发布

阅读量389

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/m0_55041880/article/details/118094784

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

本文介绍了三种方法实现CSS布局中子元素在父元素内部的水平垂直居中。第一种是通过设置margin实现水平居中，要求子元素宽度小于父元素。第二种是使用绝对定位，结合transform的translate属性调整。第三种是利用margin负值实现居中，但要注意在子元素相对定位时可能导致外边距折叠的问题。示例代码展示了具体实现方式。

摘要由CSDN通过智能技术生成

1.设置margin：实现水平居中且只能水平居中并且子元素的宽度要小于父元素
2.设置参照父元素的绝对定位设置left top 为50%(父元素的宽高一半) 实现子元素在父元素中线对齐
设置transform变形函数将translate值设为-50%(translate百分比是自己的宽高百分比) =>实现水平垂直居中
3.将2中的位移函数变成margin(-自己的宽/2，-自己的高/2) 因为margin的百分比指的是父元素的百分比
注：：：当子元素相对定位时若使用margin竖直方向不能居中会发生外边距折叠

代码

在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 400px;
            height: 400px;
            background-color: salmon;
            margin: 0 auto;
            position: relative;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: seagreen;
            margin: 0 auto;
            position: absolute;
            /* position: relative; */
            /* 子元素相对定位下的margin会和父元素发生外边距折叠 */
            left: 50%;
           top: 50%;
           /* transform: translate(-50%,-50%); */
           margin-left: -100px;
           margin-top: -100px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>