css 如何将Flexbox中的元素居中到页面的中心？

i2loujxw 于 2023-08-09 发布在其他

关注(0)|答案(4)|浏览(142)

我一直在试图弄清楚如何将Flexbox中的元素居中到页面的中心，但我不确定如何或是否可以以非janky的方式完成。我尝试过使用绝对/相对定位来将元素移动到位，但它们从未完全对齐。我曾经考虑过使用网格，让flex box元素跨越中心列，但这似乎太不稳定了，因为网格单元格的数量和大小可能并不总是与我想要居中的元素相同。
下面我举一个例子来说明我的问题。我希望将Flexbox中最右边的元素居中到页面的中心，这样蓝色的框就在页面的中心，红色的框仍然在页面的左边。

.title {
  text-align: center;
  font-weight: bold;
  font-size: 40;
}

.box {
  display: flex;
  margin: auto;
  justify-content: center;
}

个字符
编辑：我已经创建了一个模拟图像，我想用我提供的例子来实现。对不起，如果我不能准确地解释我想要的。x1c 0d1x的数据

css

来源：https://stackoverflow.com/questions/76809589/how-to-center-an-element-in-a-flexbox-to-the-center-of-the-page

4条答案

按热度按时间

lyfkaqu11#

在flex容器的第一个div上使用absolute positioning，通过使用left属性并将其vlue设置为0，使其保持在左侧。另外，在元素上将position设置为relative非常重要，您希望它的子元素绝对定位到，否则它们将绝对定位到body。

.title {
  text-align: center;
  font-weight: bold;
  font-size: 40;
}

.box {
  position: relative;
  display: flex;
  margin: auto;
  justify-content: center;
}

.box > div:first-child {
    position: absolute;
    left: 0;
}

个字符

赞(0）回复(0）举报 2023-08-09

0qx6xfy62#

您可以设置flex-direction: column;，然后为它们给予高度和宽度。

.title {
  text-align: center;
  font-weight: bold;
  font-size: 40;
}

.box {
  display: flex;
  margin: auto;
  flex-direction: column;
  width: 200px;
}

个字符

赞(0）回复(0）举报 2023-08-09

uurity8g3#

我认为解决flexbox问题的正确方法是用visibility: hidden创建另一个块，并利用flex box的justify-content: space-between。
我的示例代码：
联系我们

<body>
    <div class="title">Test Title</div>
    <div class="box">
      <div class="item" style="background-color: red; padding: 1rem">
        Left Item
      </div>
      <div class="item" style="background-color: yellow; padding: 1rem">
        Middle
      </div>
      <div class="item" style="background-color: blue; padding: 1rem">
        Right item
      </div>
    </div>
  </body>

字符串
css：

.title {
  text-align: center;
  font-weight: bold;
  font-size: 40;
}

.box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  width: 100vw;
}

.item {
  height: 50px;
  width: 50px;
}

.item:nth-child(3) {
  visibility: hidden;
}

型

赞(0）回复(0）举报 2023-08-09

wn9m85ua4#

这是你的CSS：

.box {
  display: flex;
  margin: auto;
  justify-content: center;
  align-items: center;
  height: 400px; /* Any Value */
}

字符串

赞(0）回复(0）举报 2023-08-09

我来回答

css 如何将Flexbox中的元素居中到页面的中心？

4条答案

相关问题

热门标签

最新问答