Flexbox：水平和垂直居中

本文翻译自：Flexbox: center horizontally and vertically

How to center div horizontally, and vertically within the container using flexbox. 如何使用flexbox在容器内水平和垂直居中div。 In below example, I want each number below each other (in rows), which are centered horizontally. 在下面的示例中，我希望每个数字彼此相邻（按行），它们水平居中。

 .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 http://codepen.io/anon/pen/zLxBo

---

#1楼

参考：https://stackoom.com/question/1HplE/Flexbox-水平和垂直居中

---

#2楼

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-item elements should be block level ( div instead 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 auto instead of 100% . 另外，在.row ，将宽度设置为auto而不是100% 。

Your .flex-container properties are fine. 您的.flex-container属性很好。

If you want the .row to be centered vertically in the view port, assign 100% height to html and body , and also zero out the body margins. 如果您希望.row在视.row垂直居中，请为html和body指定100％的高度，并且将body边距设为零。

Note that .flex-container needs 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-wrap properties could have made this design easier to implement. flex-flow ， flex-direction ， flex-wrap属性可以使此设计更易于实现。 I think that the .row container is not needed unless you want to add some styling around the elements (background image, borders and so on). 我认为不需要.row容器，除非您要在元素周围添加一些样式（背景图像，边框等）。

A useful resource is: http://demo.agektmr.com/flexbox/ 有用的资源是： http : //demo.agektmr.com/flexbox/

---

#3楼

Don't forgot to use important browsers specific attributes: 不要忘记使用重要的浏览器特定属性：

align-items: center; align-items：居中; --> ->

-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. 祝好运。

---

#4楼

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. 在这两种情况下，居中div的高度可以是可变的，不确定的，未知的等。 The height of the centered divs doesn't matter. 居中的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: 当伸缩项目水平堆叠时：

Adjust the flex-direction rule 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 context is 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. 子代之外的flex容器的后代不参与flex布局，并且将忽略flex属性。 Essentially, flex properties are not inheritable beyond the children. 本质上，flex属性不能在子级之外继承。

Hence, you will always need to apply display: flex or display: inline-flex to 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: auto to the content element of the flex item. 或者，您可以将margin: auto应用于弹性项目的content元素。

p { margin: auto; }

Learn about flex auto margins here: Methods for Aligning Flex Items (see box#56). 在此处了解有关弹性auto边距的信息： 调整弹性项目的方法 （请参见框＃56）。

---

Centering multiple lines of flex items 将多行弹性项目居中

When a flex container has multiple lines (due to wrapping) the align-content property will be necessary for cross-axis alignment. 当flex容器有多行（由于包装）时， align-content属性对于跨轴对齐将是必需的。

From the spec: 从规格：

8.4. 8.4。 Packing Flex Lines: the align-content property 包装伸缩线： align-content属性

The align-content property aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. 当横轴上有多余的空间时， align-content属性将伸缩容器内的行对齐在伸缩容器内，类似于justify-content在主轴内对齐单个项目的方式。 Note, this property has no effect on a single-line flex container. 注意，此属性对单行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 . 除了IE <10以外 ，所有主流浏览器都支持Flexbox。 Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes . 某些最新的浏览器版本（例如Safari 8和IE10）需要供应商前缀 。 For a quick way to add prefixes use Autoprefixer . 要快速添加前缀，请使用Autoprefixer 。 More details in this answer . 此答案中有更多详细信息。

---

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

---

#5楼

Using CSS+ 使用CSS +

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

take a look HERE 在这里看看

---

#6楼

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>