为何自定义HTML页面无法实现浏览器默认的图片垂直居中？

你的代码里margin: auto只能实现水平居中——普通文档流布局下，垂直方向的剩余空间不会被margin:auto分配，这就是图片没法垂直居中的核心原因。浏览器直接打开图片时会自动应用特殊布局规则实现居中，自定义页面需要手动设置对应样式。

下面是几种简单可行的解决方案：

方案1：Flex布局（推荐） #

给body添加flex容器属性，让内部元素自动实现垂直+水平居中：

<html style="height: 100%;">
  <head>
    <meta name="viewport" content="width=device-width, minimum-scale=0.1">
    <style>
      body {
        margin: 0;
        height: 100%;
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
        /* background-color: rgb(14,14,14); */
      }
      img {
        user-select: none;
      }
    </style>
  </head>
  <body>
    <img src="https://fastly.picsum.photos/id/382/200/300.jpg?hmac=ql7Jj1WJu3zhhAn2p18Oxdn-JE1qZBR-lDF-MOVXCUA" alt="">
  </body>
</html>

方案2：Grid布局（更简洁） #

用Grid的place-items属性一步完成居中设置：

<html style="height: 100%;">
  <head>
    <meta name="viewport" content="width=device-width, minimum-scale=0.1">
    <style>
      body {
        margin: 0;
        height: 100%;
        display: grid;
        place-items: center; /* 同时实现垂直+水平居中 */
        /* background-color: rgb(14,14,14); */
      }
      img {
        user-select: none;
      }
    </style>
  </head>
  <body>
    <img src="https://fastly.picsum.photos/id/382/200/300.jpg?hmac=ql7Jj1WJu3zhhAn2p18Oxdn-JE1qZBR-lDF-MOVXCUA" alt="">
  </body>
</html>

方案3：绝对定位+Transform（兼容旧浏览器） #

如果需要适配低版本浏览器，可以用这种传统方式：

<html style="height: 100%;">
  <head>
    <meta name="viewport" content="width=device-width, minimum-scale=0.1">
    <style>
      body {
        margin: 0;
        height: 100%;
        position: relative;
        /* background-color: rgb(14,14,14); */
      }
      img {
        user-select: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* 反向偏移自身宽高的一半，实现居中 */
      }
    </style>
  </head>
  <body>
    <img src="https://fastly.picsum.photos/id/382/200/300.jpg?hmac=ql7Jj1WJu3zhhAn2p18Oxdn-JE1qZBR-lDF-MOVXCUA" alt="">
  </body>
</html>

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