盒子水平垂直居中的11种方案

最新推荐文章于 2023-05-15 23:02:06 发布

重阳微噪

最新推荐文章于 2023-05-15 23:02:06 发布

阅读量362

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/weixin_44160385/article/details/108777192

版权

1、定位+margin拉回

<style>
    #box {
    
      width: 100px;
      height: 100px;
      position: relative;
      background-color: #ff0;
    }
    #block {
    
      width: 30px;
      height: 30px;
      background-color: aqua;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -15px;
      margin-top: -15px;
    }
  </style>
  <body>
    <div id="box">
      <span id="block">1</span>
    </div>
  </body>

2、定位+transform拉回

<style>
    #box {
    
      width: 100px;
      height: 100px;
      position: relative;
      background-color: #ff0;
    }
    #block {
    
      width: 30px;
      height: 30px;
      background-color: aqua;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
  <body>
    <div id="box">
      <span id="block">1</span>
    </div>
  </body>

3、绝对定位各方向0+margin: auto

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uyp9Oj9w-1600935943593)(https://imgkr2.cn-bj.ufileos.com/32bad828-b643-435a-8ea4-7b33e33af9c6.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=Wzd63dY4h8%252FrQxkUOlOSmcupdSs%253D&Expires=1601021167)]

<style>
    #box {
    
      width: 100px;
      height: 100px;
      position: relative;
      background-color: #f00;
    }
    #block {

最低0.47元/天解锁文章

重阳微噪

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
盒子水平垂直居中的11种方案

1、定位+margin拉回<style> #box { width: 100px; height: 100px; position: relative; background-color: #ff0; } #block { width: 30px; height: 30px; background-color: aqua; position: absolute;
复制链接

扫一扫