使用定位和margin属性实现盒子的垂直水平居中（这个方法好记一点）

最新推荐文章于 2022-07-11 23:43:29 发布

silence^

最新推荐文章于 2022-07-11 23:43:29 发布

阅读量719

点赞数 2

本文链接：https://blog.csdn.net/lyclyc_/article/details/106962433

版权

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 用定位和margin负边距实现盒子在屏幕中的垂直水平居中 */
        
        .box {
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            left: 50%;
            top: 50%;
            /* 为什么box的父元素没有设置相对定位？为什么要加负边距？-100px之类的， 没有设置相对定位的原因是：相对于浏览器窗口进行定位，浏览器窗口已经是父盒子了，所以不需要再设置相对定位。 加负边距是因为，left: 50%和top: 50%是box盒子的左上角相对于浏览器屏幕的左上角进行设置的定位。box盒子的左上角相对于浏览器是居中的，要想使整个盒子居中，需要使盒子左移 */
            margin-left: -100px;
            margin-top: -100px;
        }
    </style>
</head>

<body>
    <div class="box">
        我有固定的宽度和高度
    </div>
</body>

</html>

图解如下
在这里插入图片描述

silence^

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用定位和margin属性实现盒子的垂直水平居中（这个方法好记一点）

代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
复制链接

扫一扫