div盒子实现垂直水平居中

最新推荐文章于 2023-05-27 23:30:00 发布

秦理

最新推荐文章于 2023-05-27 23:30:00 发布

阅读量2.4k

点赞数 1

分类专栏：前端开发文章标签： css css3 html html5

本文链接：https://blog.csdn.net/qq_42889406/article/details/108697502

版权

前端开发专栏收录该内容

26 篇文章 6 订阅

订阅专栏

CSS实现div盒子垂直水平居中
未修改前样式：
在这里插入图片描述
方法一：定位（父元素相对定位，子元素绝对定位）

     <style>
        .bigBox{
            position: relative;
            widows: 600px;;
            height:400px;
            border: 2px solid black;
        }

        .smallBox{
            position: absolute;
            top:0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 200px;
            height: 200px;
            background-color:pink;
        }
    </style>
</head>
<body>
    <!-- div盒子实现垂直水平居中 -->

    <div class="bigBox">
        <div class="smallBox"></div>
    </div>
    
</body>

效果图一：在这里插入图片描述
方法二：外边距
口诀：父相子绝，上左各一半，外边距减自身宽高一半；

<style>
        .bigBox{
            position: relative;
            widows: 600px;;
            height:400px;
            border: 2px solid black;
        }

        .smallBox{
            position: absolute;
            top:50%;
            left: 50%;
            margin:-100px 0 0 -100px;
            width: 200px;
            height: 200px;
            background-color:pink;
        }
    </style>
</head>
<body>
    <!-- div盒子实现垂直水平居中 -->

    <div class="bigBox">
        <div class="smallBox"></div>
    </div>
    
</body>

效果图：
在这里插入图片描述
方法三：transform属性

<style>
        .bigBox{
            position: relative;
            widows: 600px;;
            height:400px;
            border: 2px solid black;
        }

        .smallBox{
            position: absolute;
            top:50%;
            left: 50%;
             /*  transform常用于 2D 或 3D 转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜。  */
            transform: translate(-50%,-50%);
            width: 200px;
            height: 200px;
            background-color:pink;
        }
    </style>
</head>
<body>
    <!-- div盒子实现垂直水平居中 -->

    <div class="bigBox">
        <div class="smallBox"></div>
    </div>
    
</body>

效果图：
在这里插入图片描述

方法四：flex布局

    <style>
        .bigBox{
            display: flex;
            /* 垂直居中 */
            align-items: center; 
             /* 水平居中 */
            justify-content: center;
            widows: 600px;;
            height:400px;
            border: 2px solid black;
        }

        .smallBox{
          
            width: 200px;
            height: 200px;
            background-color:pink;
        }
    </style>
</head>
<body>
    <!-- div盒子实现垂直水平居中 -->

    <div class="bigBox">
        <div class="smallBox"></div>
    </div>
    
</body>

效果图：
在这里插入图片描述

秦理

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div盒子实现垂直水平居中

CSS实现div盒子垂直水平居中未修改前样式：方法一：定位（父元素相对定位，子元素绝对定位） <style> .bigBox{ position: relative; widows: 600px;; height:400px; border: 2px solid black; } .smallBox{ posit
复制链接

扫一扫