网页中如何让一个div垂直水平居中（绝对定位）

我是神秘人

2022-10-21 19:35:31 124 💗 0 @

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

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: blue;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -100px;
  }
</style>

绝对定位，上左为50%，再让上左外边距为: -（实际宽高/2）

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

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: blue;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
</style>

绝对定位，上下左右为0，margin为auto

目录导航

打开“扫一扫”，打开网页后点击屏幕右上角分享按钮
或点击复制连接

2022-10-21 19:35:31 0个人觉得很赞

发表评论

评论列表

博主

删除

点击加载更多

快来参与评论

公告

昵称：

园龄：2年325天

注册时间：2021-11-16

当前在第：1页

总共：1条

搜索

精品文章 48小时阅读排行

优秀文章 7天获赞排行