使用margin: 0 auto无法让div完全居中，如何实现水平垂直双居中？

嘿，我明白你现在的困扰——margin: 0 auto确实只能搞定水平居中，要实现完全居中（水平+垂直），这里有几个实用的方案，结合你现有的body渐变样式，我给你整理好了代码：

方案1：Flexbox布局（推荐，现代浏览器友好） #

Flexbox是目前最简洁的居中方案，只需要给body添加几个属性就能实现：

body {
  min-height: 100vh; /* 让body占满整个视口高度 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  /* 你原有的渐变背景样式 */
  background: #0a056f;
  background: -moz-linear-gradient(45deg, #0a056f 0%, #054fb5 100%);
  background: -webkit-linear-gradient(45deg, #0a056f 0%,#054fb5 100%);
  background: linear-gradient(45deg, #0a056f 0%,#054fb5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a056f', endColorstr='#054fb5',GradientType=1 );
}

/* 你的目标div，不需要额外margin也能居中 */
.your-div {
  width: 300px; /* 示例宽度，根据你的需求调整 */
  height: 200px; /* 示例高度，根据你的需求调整 */
  background: #fff; /* 示例背景，方便看效果 */
}

方案2：Grid布局（同样简洁，现代浏览器支持） #

Grid布局也是一种极简的方式，代码更少：

body {
  min-height: 100vh;
  display: grid;
  place-items: center; /* 同时实现水平+垂直居中 */
  /* 你原有的渐变背景样式 */
  background: #0a056f;
  background: -moz-linear-gradient(45deg, #0a056f 0%, #054fb5 100%);
  background: -webkit-linear-gradient(45deg, #0a056f 0%,#054fb5 100%);
  background: linear-gradient(45deg, #0a056f 0%,#054fb5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a056f', endColorstr='#054fb5',GradientType=1 );
}

.your-div {
  width: 300px;
  height: 200px;
  background: #fff;
}

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

如果你需要兼容IE这类旧浏览器，可以用这个方案：

body {
  min-height: 100vh;
  position: relative; /* 为绝对定位的子元素提供参考 */
  /* 你原有的渐变背景样式 */
  background: #0a056f;
  background: -moz-linear-gradient(45deg, #0a056f 0%, #054fb5 100%);
  background: -webkit-linear-gradient(45deg, #0a056f 0%,#054fb5 100%);
  background: linear-gradient(45deg, #0a056f 0%,#054fb5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a056f', endColorstr='#054fb5',GradientType=1 );
}

.your-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 向左向上移动自身宽高的50%，实现居中 */
  width: 300px;
  height: 200px;
  background: #fff;
}

小提示： #

• 前两种方案（Flex/Grid）是现代前端的首选，代码简洁且不需要考虑元素自身尺寸；
• 第三种方案适合需要兼容旧环境的场景，不过要注意transform在极旧浏览器里的兼容性。

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