如何使用flexbox实现父div本身居中及响应式居中最优方案？

实现div本身居中的方法 #

你当前代码中.center的flex相关属性仅作用于它的子元素，所以只能控制内部<p>标签的居中效果，不会影响.center自身的位置。要让div本身居中可以用以下两种方案：

方案1：margin属性实现（最简便） #

直接给.center添加margin: 0 auto即可，块级元素会自动平分左右剩余空间实现水平居中，修改后的CSS代码如下：

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60%;
  border: 5px solid #FFFF00;
  padding: 10px;
  /* 新增以下代码实现自身水平居中 */
  margin: 0 auto;
}

方案2：flexbox实现（需要控制父容器） #

如果要完全用flexbox逻辑实现，给.center的父容器（默认是<body>）添加flex属性即可：

/* 给父元素添加flex控制子元素（也就是你的.center div）的位置 */
body {
  display: flex;
  justify-content: center; /* 水平居中 */
  /* 如果需要同时垂直居中，新增以下两行 */
  /* align-items: center;
  min-height: 100vh; */
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60%;
  border: 5px solid #FFFF00;
  padding: 10px;
}

你当前的实现效果如下：
#

响应式居中最优方案 #

根据不同使用场景选择对应方案即可：

• 仅需要水平居中块级元素：首选margin: 0 auto，兼容性最好、实现成本最低，不管宽度是固定值、百分比还是max-width限制的自适应宽度，都能正常生效，适配所有响应式场景。
• 需要同时水平+垂直居中：首选flexbox方案，给父容器设置display: flex; justify-content: center; align-items: center;，根据实际场景给父容器设置对应高度即可，不需要提前知道子元素的宽高，适配动态内容的响应式场景。
• 行内/行内块元素居中：直接给父元素加text-align: center即可，适配文本、按钮、图片等行内元素的响应式居中。

内容的提问来源于stack exchange，提问作者İrfan Çalışır