用ChatGPT解决这个技术问题 Extra ChatGPT

Flexbox：水平和垂直居中

如何使用 flexbox 在容器内水平和垂直居中 div。在下面的示例中，我希望每个数字彼此下方（按行），它们水平居中。

.flex-container { 填充：0;边距：0；列表样式：无；显示：弯曲；对齐项目：居中；证明内容：中心； } 行 { 宽度：100%; } .flex-item { 背景：番茄；填充：5px；宽度：200px；高度：150px；边距：10px；行高：150px；白颜色;字体粗细：粗体；字体大小：3em；文本对齐：居中； }

1
2
3
4

http://codepen.io/anon/pen/zLxBo

在您的 CSS 中，您有 row{，它对行没有影响。如果将其更改为 .row{，结果将完全不同。

M
Michael Gearon

我认为您想要以下内容。

html, 身体 { 高度：100%; } 正文 { 边距：0; } .flex-container { 高度：100%;填充：0；边距：0；显示：弯曲；对齐项目：居中；证明内容：中心； } .row { 宽度：自动；边框：1px 纯蓝色； } .flex-item { 背景颜色：番茄；填充：5px；宽度：20px；高度：20px；边距：10px；行高：20px；白颜色;字体粗细：粗体；字体大小：2em；文本对齐：居中； }

1
2
< div class="flex-item">3
4

参见演示：http://jsfiddle.net/audetwebdesign/tFscL/

如果您希望高度和顶部/底部填充正常工作，您的 .flex-item 元素应该是块级（div 而不是 span）。

此外，在 .row 上，将宽度设置为 auto 而不是 100%。

您的 .flex-container 属性很好。

如果您希望 .row 在视口中垂直居中，请将 100% 的高度分配给 html 和 body，并将 body 边距归零。

请注意，.flex-container 需要一个高度才能看到垂直对齐效果，否则容器会计算包围内容所需的最小高度，该高度小于本示例中的视口高度。

脚注：
flex-flow、flex-direction、flex-wrap 属性可以使此设计更易于实现。我认为不需要 .row 容器，除非您想在元素周围添加一些样式（背景图像、边框等）。

一个有用的资源是：http://demo.agektmr.com/flexbox/

弹性项目不需要是块级的，除非它们包含的内容需要它。此外，您已经为所有显示属性添加了前缀，但没有为任何其他 Flexbox 属性添加前缀（在其他草稿中具有不同的名称）。
@cimmonon 我同意你关于块级别的观点，并相应地编辑了我的帖子。对齐不需要块级别，但如果用户想要指定高度等可能需要。我对浏览器前缀很随意，我只是假设一个完美的浏览器是为了获得一个工作演示。再次感谢您的评论，感谢您的反馈。
如果溢出，它会裁剪顶部。 i.imgur.com/3dgFfQK.png 有什么方法可以避免这种情况？
@BrianGates如果窗口的高度太短，你希望4个元素如何显示，2x2、1x4？
解决方案在这里：stackoverflow.com/questions/24538100/…
M
Michael Benjamin

如何在 Flexbox 中垂直和水平居中元素

以下是两种通用的定心解决方案。

一个用于垂直对齐的弹性项目 (flex-direction: column)，另一个用于水平对齐的弹性项目 (flex-direction: row)。

在这两种情况下，居中 div 的高度可以是可变的、未定义的、未知的等等。居中 div 的高度无关紧要。

这是两者的 HTML： 

<div id="container"><!-- flex container -->

    <div class="box" id="bluebox"><!-- flex item -->
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox"><!-- flex item -->
        <p>DIV #2</p>
    </div>

</div>

CSS（不包括装饰样式）

当弹性项目垂直堆叠时： 

#container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* will center text in <p>, which is not a flex item */
}

https://i.stack.imgur.com/9Jbjt.png

DEMO

当弹性项目水平堆叠时：

根据上面的代码调整 flex-direction 规则。 

#container {
    display: flex;
    flex-direction: row;     /* make main axis horizontal (default setting) */
    justify-content: center; /* center items horizontally, in this case */
    align-items: center;     /* center items vertically, in this case */
    height: 300px;
}

https://i.stack.imgur.com/ccTOU.png

DEMO

将弹性项目的内容居中

flex formatting context 的范围仅限于父子关系。超出子元素的 flex 容器的后代不参与 flex 布局，并且将忽略 flex 属性。本质上，flex 属性不能在子级之外继承。

因此，您将始终需要将 display: flex 或 display: inline-flex 应用于父元素，以便将 flex 属性应用于子元素。

为了使弹性项目中包含的文本或其他内容垂直和/或水平居中，使项目成为（嵌套的）弹性容器，并重复居中规则。 

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* for single line flex container */
    align-content: center;      /* for multi-line flex container */
}

更多详细信息：How to vertically align text inside a flexbox?

或者，您可以将 margin: auto 应用于弹性项目的内容元素。 

p { margin: auto; }

在此处了解 flex auto 边距：Methods for Aligning Flex Items（参见框 #56）。

将多行弹性项目居中

当 flex 容器有多行时（由于换行），align-content 属性将是横轴对齐所必需的。

从规范：

8.4.打包 Flex 线条：align-content 属性 align-content 属性在横向轴上有额外空间时对齐 flex 容器内的线条，类似于 justify-content 在主轴内对齐单个项目的方式。请注意，此属性对单行 flex 容器没有影响。

更多详细信息：How does flex-wrap work with align-self, align-items and align-content?

浏览器支持

所有主要浏览器都支持 Flexbox，except IE < 10。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要 vendor prefixes。要快速添加前缀，请使用 Autoprefixer。 this answer 中有更多详细信息。

旧浏览器的居中解决方案

有关使用 CSS 表格和定位属性的替代居中解决方案，请参阅此答案：https://stackoverflow.com/a/31977476/3597276

我们可以水平向右、向左和垂直居中吗？
@kapil，将 justify-content 属性调整为 space-between 或 space-around... jsfiddle.net/8o29y7pd/105
这个答案应该是最重要的。使用 Flex 应该是执行此操作的首选方式，因为它可以很好地跨设备和屏幕进行缩放。它比使用浮点数和管理多个 div 要容易得多。
ie 11 不能正常工作 水平垂直居中
感谢您注意到子元素不会自动伸缩项目。如果我们希望他们成为，我们需要迎合他们。
b
ben

添加 

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

到您想要居中的任何容器元素。文档：justify-content 和 align-items。

P
Penny Liu

你可以利用 

display: flex;
align-items: center;
justify-content: center;

在你的父组件上

https://i.stack.imgur.com/sBAyt.png

Q
QMaster

不要忘记使用重要的浏览器特定属性：

对齐项目：居中； --> 

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

证明内容：中心； --> 

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

您可以阅读这两个链接以更好地理解 flex：http://css-tricks.com/almanac/properties/j/justify-content/ 和 http://ptb2.me/flexbox/

祝你好运。

这是一个很好的观点，因为今天（仅支持最新的浏览器）你只需要最后两行 -webkit.. 用于 safari，最后一行用于所有其他浏览器
+1 是因为 2009 年和 2012 年 3 月的旧工作草案仍然拥有重要的用户份额（根据caniuse.com，合计约为 8%）。
Flext 在 safari 中不起作用，你怎么能解决这个问题？
很多天前，我在 windows 上查看了最新版本的 safari，我不太记得了，但我会检查并告诉你。请告诉我你指的是哪个版本的 safari？在哪个操作系统上？
@user3378649 最新的 safari 版本可以支持 Flex-box，请看这个链接：caniuse.com/#search=flexbox
M
MelanieP

1 - 将父 div 上的 CSS 设置为 display: flex;

2 - 将父 div 上的 CSS 设置为 flex-direction: column;
请注意，这将使该 div 中的所有内容从上到下排列。如果父 div 仅包含子 div 而没有其他内容，这将最有效。

3 - 将父 div 上的 CSS 设置为 justify-content: center;

下面是 CSS 外观的示例：

.parentDivClass { 显示：弹性；弹性方向：列；证明内容：中心； }

k
kishore

用这个： 

   html, body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
   }

对于一些这样的 HTML 标记： 

   <html>
      <body>
        <main>
          <button> abc </button>
          <p> something </p>
        </main>
      </body>
    </html>

html，正文 { 显示：弹性；对齐项目：居中；证明内容：中心；高度：100%； }

一些东西

P
Polar

diplay: flex; 的容器和 margin:auto; 的项目完美。

注意：您必须设置 width 和 height 才能看到效果。

#container{ 宽度：100%; /*宽度需要设置*/ height: 150px; /*高度需要设置*/ display: flex; } .item{ 边距：自动； /*这些将使项目居中*/ background-color: #CCC; }

CENTER

A
Aksana Tolstoguzova

margin: auto 与 flexbox 一起“完美”工作，即它允许垂直和水平居中项目。

html, 身体 { 高度：100%;最大高度：100%； } .flex-container { 显示：弹性；高度：100%；背景颜色：绿色； } .container { 显示：弹性；边距：自动； } JS

1
< div class="row"> 2
3 < /div>
4

L
Leo

如果您需要在链接中将文本居中，这可以解决问题：

div {显示：弹性；宽度：200px；高度：80px；背景颜色：黄色； } 一个 { 显示：弹性；对齐项目：居中；证明内容：中心；文本对齐：居中； /* 只对多行重要 */ padding: 0 20px;背景颜色：银色；边框：2px 纯蓝色； }

W
Wilson

https://i.stack.imgur.com/Q3n7s.png

代码

HTML： 

<div class="flex-container">
  <div class="rows">

    <div class="row">
      <span class="flex-item">1</span>
    </div>
    <div class="row">
      <span class="flex-item">2</span>
    </div>
    <div class="row">
      <span class="flex-item">3</span>
    </div>
    <div class="row">
      <span class="flex-item">4</span>
    </div>

  </div>  
</div>

CSS： 

html, body {
  height: 100%;  
}

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.rows {
  display: flex;
  flex-direction: column;
}

其中 flex-container div 用于将您的 rows div 垂直和水平居中，而 rows div 用于对您的“项目”进行分组并在基于列的项目中对它们进行排序。

R
Rayees AC

您可以将 flex-direction:column 添加到 flex-container 

.flex-container {
  flex-direction: column;
}

将 display:inline-block 添加到 flex-item 

.flex-item {
 display: inline-block;
}

因为您添加的宽度和高度对此元素没有影响，因为它具有内联显示。尝试添加 display:inline-block 或 display:block。了解有关宽度和高度的更多信息。

还添加到行类（给定行{}不被视为样式） 

.row{
  width:100%;
  margin:0 auto;
  text-align:center;
}

行中的工作演示：

.flex-container { 填充：0;边距：0；列表样式：无；显示：弯曲；对齐项目：居中；证明内容：中心；弹性方向：列； } .row{ 宽度：100%;边距：0 自动；文本对齐：居中； } .flex-item { 背景：番茄；填充：5px；宽度：200px；高度：150px；边距：10px；行高：150px；白颜色;字体粗细：粗体；字体大小：3em；文本对齐：居中；显示：内联块； }

1
2
3
4

专栏中的工作演示：

.flex-container { 填充：0;边距：0；宽度：100%；列表样式：无；显示：弯曲；对齐项目：居中； } .row { 宽度：100%; } .flex-item { 背景：番茄；填充：5px；宽度：200px；高度：150px；边距：10px；行高：150px；白颜色;字体粗细：粗体；字体大小：3em；文本对齐：居中；显示：内联块； }

1
2
3
4

R
Raghul SK

希望这会有所帮助。 

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。
M
Marco Allori

使用 CSS+ 

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

看看HERE

因为这很容易被带有纯 flexbox 的现代浏览器广泛支持，所以你的库解决方案肯定是没有必要的。特别是因为他问如何使用 flex box 而不是 css 库来做到这一点。

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

想领先一步获取最新的外包任务吗？

立即订阅

相似问题

HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。

简体中文 English

平台

支持

友情链接

联系我们

在使用过程中有任何问题或建议，可以通过以下方式联系我们：

微信公众号: 火星来客

Email: huntsbot@xinbeitime.com

Copyright© 2022-2023 www.huntsbot.com 浙ICP备2022000860号-4 All Rights Reserved.