在移动视图中居中 flexbox

Question

问题：

一个包含三个框的容器位于桌面视图的中央。但是，在手机上看，它不在中心。

最小工作示例 (MWE):

HTML

<article>
  <section class="category cars">Cars</section>
  <section class="category food">Food</section>
  <section class="category drinks">Drinks</section>
</article>

CSS

/* Reset */
* {
  margin: 0;
  padding: 0;
}
/* Layout */
article {
  display: flex;
  justify-content: center;
  width: 100%;
}
.category {
  height: 50px;
  width: 200px;
  color: white;
  text-align: center;
  font-size: 1.5rem;
  padding: 1rem;
}
/* Background colors */
.cars {
  background-color: crimson;
}
.food {
  background-color: lightseagreen;
}
.drinks {
  background-color: deepskyblue;
}

/* Mobile view */
@media screen and (max-width: 600px) {
  article {
    flex-direction: column;
  }
}

当前输出：

三个框位于左侧。

期望输出：

这三个框在移动设备视图中应居中中间。

Answer 1

解决方案非常简单。当您将方向更改为 column 时，轴也会反转。因此，添加 align-items: center; 将使框居中。

这就是你需要的：

@media screen and (max-width: 600px) {
  article {
    flex-direction: column;
    align-items: center;
  }
}

Answer 2

您可以通过向 <article> 标签添加父元素来实现。然后，将 display: flex; width: 100%;justify-content: center; 添加到父元素 ONLY IN THE MEDIA QUERY.

这将使 <article> 标签位于中间。父元素有 background: none 这使得它看起来像 <article> 容器在中间

/* Reset */
* {
  margin: 0;
  padding: 0;
}
/* Layout */
article {
  display: flex;
  justify-content: center;
  width: 100%;
}
.category {
  height: 50px;
  width: 200px;
  color: white;
  text-align: center;
  font-size: 1.5rem;
  padding: 1rem;
}
/* Background colors */
.cars {
  background-color: crimson;
}
.food {
  background-color: lightseagreen;
}
.drinks {
  background-color: deepskyblue;
}

/* Mobile view */
@media screen and (max-width: 600px) {
  article {
    flex-direction: column;
  }
  .parent{
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

<div class="parent">
  <article>
  <section class="category cars">Cars</section>
  <section class="category food">Food</section>
  <section class="category drinks">Drinks</section>
  </article>
</div>

或

您可以将 align-items: center 添加到该列，因为您已将 flex-direction: column 设置为 <article> 标记，因此在这种情况下 align-items 将像 justify-content 一样工作

希望对您有所帮助！

或

您可以使用相对定位。在媒体查询中的文章中添加 left: 50%;position: relative;transform: translateX(-50%); 也将有助于 在某些情况下

在移动视图中居中 flexbox

Center flexbox in mobile view

html

css

media-queries

flexbox

responsive-design