CSS Grid技巧：无需空div实现单个居中占33%宽度的容器

当然有更优雅的解决方式啦，你完全不需要额外的空div元素。下面几种方案都能实现“单个div居中、占屏幕33%宽度”的效果，比你原来的方法简洁多了：

方案1：Margin自动居中（最省心的基础方案） #

这是最简单直接的做法，只需要给目标div设置宽度和自动左右边距：

.loginScreenContainer {
  width: 33%;
  margin: 0 auto; /* 左右自动边距实现水平居中 */
}

对应的HTML就只有这一个div：

<div class='loginScreenContainer'>Actual Content</div>

这种方式兼容性极好，适合绝大多数场景，代码量最少。

方案2：Flexbox布局（适合需要扩展布局的场景） #

如果你的页面后续可能有更复杂的布局需求，用Flexbox也很方便。可以把父容器（比如body）设置为Flex布局，然后让子div居中并占据指定宽度：

body {
  display: flex;
  justify-content: center; /* 水平居中子元素 */
  margin: 0; /* 清除body默认边距 */
}

.loginScreenContainer {
  width: 33%;
}

HTML同样只需要单个div，这种方式的优势是Flexbox能轻松处理垂直居中（加上align-items: center和min-height: 100vh就能实现全屏垂直居中），扩展性更强。

方案3：Grid布局（无额外div的Grid实现） #

如果你偏爱Grid布局，也可以不用额外的空div，只需要在父容器上定义网格，然后让目标div定位到中间列：

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三列布局，左右列自动均分剩余空间 */
  margin: 0;
}

.loginScreenContainer {
  grid-column: 2; /* 把div放在第二列（中间列） */
}

这种方式和你原来的思路类似，但省去了手动添加空div的麻烦，Grid会自动处理左右的空白区域。

总结 #

如果只是单纯实现“居中+33%宽度”的需求，方案1是最优选择，代码最少、逻辑最简单。如果后续有复杂布局需求，可以考虑方案2或3。

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