Html Flexbox：水平和垂直居中

Question

提问by bsr

How to center div horizontally, and vertically within the container using flexbox. In below example, I want each number below each other (in rows), which are centered horizontally.

如何使用 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

Answer 1

回答by Marc Audet

I think you want something like the following.

我想你想要像下面这样的东西。

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    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>

See demo at: http://jsfiddle.net/audetwebdesign/tFscL/

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

Your .flex-itemelements should be block level (divinstead of span) if you want the height and top/bottom padding to work properly.

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

Also, on .row, set the width to autoinstead of 100%.

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

Your .flex-containerproperties are fine.

你的.flex-container属性很好。

If you want the .rowto be centered vertically in the view port, assign 100% height to htmland body, and also zero out the bodymargins.

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

Note that .flex-containerneeds a height to see the vertical alignment effect, otherwise, the container computes the minimum height needed to enclose the content, which is less than the view port height in this example.

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

Footnote:
The flex-flow, flex-direction, flex-wrapproperties could have made this design easier to implement. I think that the .rowcontainer is not needed unless you want to add some styling around the elements (background image, borders and so on).

附注：
本flex-flow，flex-direction，flex-wrap性能会犯这样的设计更容易实现。我认为.row不需要容器，除非您想在元素（背景图像、边框等）周围添加一些样式。

A useful resource is: http://demo.agektmr.com/flexbox/

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

Answer 2

回答by Michael Benjamin

How to Center Elements Vertically and Horizontally in Flexbox

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

Below are two general centering solutions.

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

One for vertically-aligned flex items (flex-direction: column) and the other for horizontally-aligned flex items (flex-direction: row).

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

In both cases the height of the centered divs can be variable, undefined, unknown, whatever. The height of the centered divs doesn't matter.

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

Here's the HTML for both:

这是两者的 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(excluding decorative styles)

CSS（不包括装饰样式）

When flex items are stacked vertically:

当弹性项目垂直堆叠时：

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

DEMO

演示

When flex items are stacked horizontally:

当 flex 项目水平堆叠时：

Adjust the flex-directionrule from the code above.

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

DEMO

演示

Centering the content of the flex items

将弹性项目的内容居中

The scope of a flex formatting contextis limited to a parent-child relationship. Descendants of a flex container beyond the children do not participate in flex layout and will ignore flex properties. Essentially, flex properties are not inheritable beyond the children.

一个范围柔性格式化的内容被限制为父子关系。超出孩子的 flex 容器的后代不参与 flex 布局并且将忽略 flex 属性。本质上，flex 属性在子级之外是不可继承的。

Hence, you will always need to apply display: flexor display: inline-flexto a parent element in order to apply flex properties to the child.

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

In order to vertically and/or horizontally center text or other content contained in a flex item, make the item a (nested) flex container, and repeat the centering rules.

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

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

More details here: How to vertically align text inside a flexbox?

更多细节在这里：如何在 flexbox 内垂直对齐文本？

Alternatively, you can apply margin: autoto the content element of the flex item.

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

p { margin: auto; }

Learn about flex automargins here: Methods for Aligning Flex Items(see box#56).

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

Centering multiple lines of flex items

将多行弹性项目居中

When a flex container has multiple lines (due to wrapping) the align-contentproperty will be necessary for cross-axis alignment.

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

From the spec:

从规范：

8.4. Packing Flex Lines: the align-contentproperty
The align-contentproperty aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how justify-contentaligns individual items within the main-axis. Note, this property has no effect on a single-line flex container.

8.4. 包装 Flex Lines：align-content属性
align-content当横轴中有额外空间时，该属性会在 flex 容器内对齐 flex 容器的线条，类似于如何justify-content在主轴内对齐单个项目。 请注意，此属性对单行 flex 容器没有影响。

More details here: How does flex-wrap work with align-self, align-items and align-content?

更多细节在这里：flex-wrap 如何与 align-self、align-items 和 align-content 一起工作？

Browser support

浏览器支持

Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.

所有主流浏览器都支持 Flexbox，但 IE < 10 除外。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要供应商前缀。要快速添加前缀，请使用Autoprefixer。此答案中的更多详细信息。

Centering solution for older browsers

旧浏览器的居中解决方案

For an alternative centering solution using CSS table and positioning properties see this answer: https://stackoverflow.com/a/31977476/3597276

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

Answer 3

回答by ben

Add

添加

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

to the container element of whatever you want to center. Documentation: justify-contentand align-items.

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

Answer 4

回答by QMaster

Don't forgot to use important browsers specific attributes:

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

align-items: center; -->

对齐项目：居中；-->

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

justify-content: center; -->

对齐内容：居中；-->

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

You could read this two links for better understanding flex: http://css-tricks.com/almanac/properties/j/justify-content/and http://ptb2.me/flexbox/

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

Good Luck.

祝你好运。

Answer 5

回答by MelanieP

1 - Set CSS on parent div to display: flex;

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

2 - Set CSS on parent div to flex-direction: column;
Note that this will make all content within that div line up top to bottom. This will work best if the parent div only contains the child and nothing else.

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

3 - Set CSS on parent div to justify-content: center;

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

Here is an example of what the CSS will look like:

以下是 CSS 外观的示例：

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

Answer 6

回答by Vikas Gupta

You can make use of

你可以利用

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

on your parent component

在您的父组件上

https://repl.it/repls/TomatoImaginaryInitialization

Answer 7

回答by Polar

diplay: flex;for it's container and margin:auto;for it's item works perfect.

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

NOTE:You have to setup the widthand heightto see the effect.

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

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

Answer 8

回答by Aksana Tolstoguzova

margin: autoworks perfect with flexbox. It centralize vertically and horizontally.

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>

Answer 9

回答by Leo

If you need to center a text in a link this will do the trick:

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

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>

Answer 10

回答by Wilson

RESULT:

结果：

CODE

代码

HTML:

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:

CSS：

html, body {
  height: 100%;  
}

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

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

where flex-containerdiv is used to center vertically and horizontally your rowsdiv, and rowsdiv is used to group your "items" and ordering them in a column based one.

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

Html Flexbox：水平和垂直居中

提问by bsr

回答by Marc Audet

回答by Michael Benjamin

How to Center Elements Vertically and Horizontally in Flexbox

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

Centering the content of the flex items

将弹性项目的内容居中

Centering multiple lines of flex items

将多行弹性项目居中

Browser support

浏览器支持

Centering solution for older browsers

旧浏览器的居中解决方案

回答by ben

回答by QMaster

回答by MelanieP

回答by Vikas Gupta

回答by Polar

回答by Aksana Tolstoguzova

回答by Leo

If you need to center a text in a link this will do the trick:

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

回答by Wilson

相关推荐

最近更新

标签

Html Flexbox：水平和垂直居中

提问by bsr

回答by Marc Audet

回答by Michael Benjamin

How to Center Elements Vertically and Horizontally in Flexbox

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

Centering the content of the flex items

将弹性项目的内容居中

Centering multiple lines of flex items

将多行弹性项目居中

Browser support

浏览器支持

Centering solution for older browsers

旧浏览器的居中解决方案

回答by ben

回答by QMaster

回答by MelanieP

回答by Vikas Gupta

回答by Polar

回答by Aksana Tolstoguzova

回答by Leo

If you need to center a text in a link this will do the trick:

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

回答by Wilson

相关推荐

Html 如何将网站连接到MYSQL数据库？

Html float 在 flex 容器中不起作用

Html 嵌入谷歌地图显示错误，直到调整网页大小

Html 删除按钮阴影

相关推荐

最近更新

标签