如何不使用margin实现按钮在图片区域的水平垂直居中

核心实现逻辑通过定位+transform偏移实现，全程不使用margin属性，兼容绝大多数浏览器场景。

完整修改后代码 #

<html>
    <head>
     <style type="text/css">
      .box{
        /* 作为子元素绝对定位的参照容器 */
        position: relative;
      }
      .box-cover{
        width:100%;
        height:80vh;
        /* 清除图片默认底部留白 */
        display: block;
      }
      button{
       padding:20px 30px;
       background-color:red;
       border:none;
       color:white;
       border-radius:5em;
       /* 脱离文档流，浮在图片上层 */
       position: absolute;
       /* 左上角对齐父容器中心 */
       left: 50%;
       top: 50%;
       /* 自身中心对齐父容器中心 */
       transform: translate(-50%, -50%);
      }
    </style>
   </head>
   <body>
    <div class="box">
     <img class="box-cover" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png">
     <button>Click ME</button>
    </div> 
   </body>
  </html>

样式修改说明 #

• 给父容器.box添加position: relative属性，作为内部绝对定位元素的位置参照
• 给图片.box-cover添加display: block属性，清除图片作为行内元素默认自带的底部留白，避免布局错位
• 给按钮新增3个属性：
  • position: absolute：让按钮脱离正常文档流，层级高于图片，实现放置在图片上层的效果
  • left: 50%、top: 50%：将按钮的左上角定位到父容器的水平、垂直中点位置
  • transform: translate(-50%, -50%)：以按钮自身宽高为基准，向左、向上偏移自身宽高的50%，最终实现按钮自身中心和父容器中心完全对齐

内容的提问来源于stack exchange，提问作者user17131159