CSS中实现div元素居中的最简单、最快速的方法是什么？

针对你提供的HTML结构，目前实现最快、兼容性最好的是Flex布局方案，仅需要给父容器.wrap添加样式即可实现水平+垂直双居中：

.wrap {
  /* 开启flex布局 */
  display: flex;
  /* 水平方向居中 */
  justify-content: center;
  /* 垂直方向居中 */
  align-items: center;
  /* 父容器需要有明确高度才能看到垂直居中效果，这里设置为撑满整个视口高度作为示例 */
  min-height: 100vh;
}

如果你只需要实现水平居中，还有更简单的写法，直接给子容器.container添加样式即可：

.container {
  /* 上下边距为0，左右边距自动分配实现水平居中 */
  margin: 0 auto;
  /* 子容器需要设置明确宽度，否则块级元素默认占满父容器宽度，看不出居中效果 */
  width: 300px;
}

两种方案的适用场景：

• Flex方案：不需要提前知道子元素的宽高，同时支持水平、垂直居中，兼容所有现代浏览器，不需要兼容IE9及更早版本的场景可以直接使用。
• margin:auto方案：仅支持水平居中，需要子元素设置固定宽度，不需要修改父容器样式，写法更简洁，适合仅需要水平居中的场景。

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