Flexbox：水平和垂直居中-解网

问：

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

.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;
}

<div class="flex-container">
  <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>

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

HTML CSS 弹性框

1赞 Hamid Mayeli 10/20/2019

在你的CSS中，你对行没有影响。如果你把它改成，结果会完全不同。row{.row{

0赞 shawee 6/21/2023

将 justify-content 和对齐项设置为居中

答：

1041赞 Marc Audet 9/26/2013 #1

我想你想要如下的东西。

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

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

观看演示： http://jsfiddle.net/audetwebdesign/tFscL/

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

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

你的财产很好。.flex-container

如果希望在视口中垂直居中，请为和指定 100% 的高度，并将边距归零。.rowhtmlbodybody

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

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

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

6赞 cimmanon 9/26/2013

Flex 项目不需要是块级的，除非它们包含的内容需要它。此外，您已为所有显示属性添加前缀，但未添加任何其他 Flexbox 属性（这些属性在其他草稿中具有不同的名称）的前缀。

1赞 Marc Audet 9/26/2013

@cimmanon我同意你关于块级别的看法，我相应地编辑了我的帖子。对齐不需要块级别，但如果用户想要指定高度等，则可能需要块级别。我对浏览器前缀持自由态度，我只是假设了一个完美的浏览器，以便获得一个有效的演示。再次感谢您的评论，感谢您的反馈。

1赞 Brian Gates 9/5/2014

如果它溢出，它会裁剪顶部。i.imgur.com/3dgFfQK.png有什么方法可以避免这种情况吗？

1赞 Marc Audet 9/5/2014

@BrianGates 如果窗口的高度太短，你希望 4 个元素如何显示，2x2、1x4？

2赞 Brian Gates 9/6/2014

解决方案就在这里：stackoverflow.com/questions/24538100/...

30赞 QMaster 6/14/2014 #2

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

align-items：居中;-->

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

justify-content：中心;-->

-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/

祝你好运。

1赞 Pete Kozak 7/17/2014

这是一个很好的观点，因为今天（仅支持最新的浏览器）您只需要最后两行 -webkit。对于野生动物园和所有其他野生动物园的最后一个

1赞 benebun 9/24/2014

+1，因为旧的 2009 年和 2012 年 3 月的工作草案仍然拥有重要的用户份额（根据 caniuse.com，合计约为 8%）。

0赞 user3378649 1/25/2015

Flext 在 Safari 中不起作用，你怎么能解决这个问题？

0赞 QMaster 1/25/2015

几天前我在 Windows 上检查了 safari 的最后一个版本，我记不太清楚了，但我会检查并会说你。请告诉我你指的是哪个版本的野生动物园？在哪个操作系统上？

0赞 QMaster 10/5/2016

@user3378649最新的 safari 版本可以支持 Flex-box，请参阅此链接： caniuse.com/#search=flexbox

344赞 Michael Benjamin 10/10/2015 #3

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

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

一个用于垂直对齐的柔性项目（），另一个用于水平对齐的柔性项目（）。flex-direction: columnflex-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（不包括装饰样式）

当 Flex 项目垂直堆叠时：

#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 */
}

演示

当弹性物品水平堆叠时：

根据上面的代码调整规则。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;
}

演示

将 Flex 项目的内容居中

Flex 格式设置上下文的范围仅限于父子关系。子容器之外的 flex 容器的后代不参与 flex 布局，并且会忽略 flex 属性。从本质上讲，flex 属性不能继承到子项之外。

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

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

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

更多细节在这里：如何在弹性框中垂直对齐文本？

或者，您可以应用于 flex 项的内容元素。margin: auto

p { margin: auto; }

在此处了解弹性边距：对齐弹性项的方法（参见框 #56）。auto

居中多行 flex 项目

当 flex 容器具有多条线（由于换行）时，该属性对于跨轴对齐是必需的。align-content

从规格：

8.4. 打包 Flex Lines：align-content 属性

该属性将 flex 容器的行对齐 Flex 容器，当交叉轴上有额外的空间时，类似于如何对齐主轴内的各个项目。请注意，此属性对单行 flex 容器没有影响。align-contentjustify-content

浏览器支持

除 IE < 10 外，所有主流浏览器都支持 Flexbox。某些最新的浏览器版本（如 Safari 8 和 IE10）需要供应商前缀。若要快速添加前缀，请使用 Autoprefixer。更多细节在这个答案。

旧版浏览器的居中解决方案

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

1赞 kapil 2/28/2017

我们可以水平地向右、向左和垂直居中吗？

2赞 Michael Benjamin 2/28/2017

@kapil，将 justify-content 属性调整为 space-between 或 space-around...jsfiddle.net/8o29y7pd/105

6赞 SeaWarrior404 11/10/2017

这个答案应该放在首位。使用 Flex 应该是执行此操作的首选方法，因为它可以很好地跨设备和屏幕扩展。它比使用浮点数和管理多个 div 要容易得多。

0赞 giveJob 3/14/2019

Ie 11 水平和垂直中心工作不正常

1赞 klewis 10/13/2020

感谢您注意到子元素不会自动成为 Flex 项目。如果我们希望他们这样做，我们需要迎合他们。

-8赞 Marco Allori 12/2/2015 #4

使用 CSS+

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

看一看这里

3赞 bungleofsketches 12/9/2015

由于使用纯 Flexbox 的现代浏览器可以轻松且广泛地支持此功能，因此您的库解决方案肯定不是必需的。特别是因为他问如何使用 flex box 而不是 css 库来做到这一点。

3赞 Leo 3/5/2017 #5

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

div {
  display: flex;

  width: 200px;
  height: 80px;
  background-color: yellow;
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* only important for multiple lines */

  padding: 0 20px;
  background-color: silver;
  border: 2px solid blue;
}

<div>
  <a href="#">text</a>
  <a href="#">text with two lines</a>
</div>

59赞 ben 4/12/2017 #6

加

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

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

5赞 Aksana Tolstoguzova 4/21/2017 #7

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

html, body {
  height: 100%;
  max-height: 100%;
}

.flex-container {
  display: flex;
    
  height: 100%;
  background-color: green;
}

.container {
  display: flex;
  margin: auto;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS</title>
</head>
<body>
  <div class="flex-container">
    <div class="container">
      <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>
</body>
</html>

16赞 MelanieP 2/26/2018 #8

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

2 - 将父 div 上的 CSS 设置为请注意，这将使该 div
中的所有内容从上到下对齐。如果父 div 仅包含子级而不包含其他任何内容，则效果最佳。flex-direction: column;

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

下面是 CSS 的示例：

.parentDivClass {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

12赞 Polar 11/13/2018 #9

diplay: flex;因为它的容器和它的物品都很完美。margin:auto;

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

#container{
  width: 100%; /*width needs to be setup*/
  height: 150px; /*height needs to be setup*/
  display: flex;
}

.item{
  margin: auto; /*These will make the item in center*/
  background-color: #CCC;
}

<div id="container">
   <div class="item">CENTER</div>
</div>

35赞 Vikas Gupta 9/25/2019 #10

您可以利用

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

在父组件上

2赞 Wilson 12/6/2019 #11

结果：

法典

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;
}

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

0赞 Carpiee 3/22/2020 #12

希望这会有所帮助。

.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;
}

1赞 Piotr Labunski 3/22/2020

虽然此代码可以回答问题，但提供有关它如何和/或为什么解决问题的其他上下文将提高答案的长期价值。

1赞 Rayees AC 9/19/2020 #13

您可以添加到 flex-containerflex-direction:column

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

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

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

因为您添加了宽度和高度，所以对此元素没有影响，因为它具有内联显示。尝试添加 display：inline-block 或 display：block。详细了解宽度和高度。

同时添加到行类（您被赋予 row{} 不被视为样式）

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

行中的工作演示：

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content:center;
  flex-direction:column;
}
.row{
  width:100%;
  margin:0 auto;
  text-align:center;
}
.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;
  display: inline-block;
}

<div class="flex-container">
  <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>

列中的工作演示：

.flex-container {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style: none;
  display: flex;
  align-items: 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;
  display: inline-block;
}

<div class="flex-container">
  <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>

25赞 Hari Kishore 8/27/2021 #14

使用这个：

   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, body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
   }

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

上一个：如何删除内联/内联块元素之间的空间？

下一个：如何使元素水平居中？

Flexbox：水平和垂直居中

Flexbox: center horizontally and vertically

评论

评论

评论