Flexbox：水平和垂直居中

如何使用flexbox水平放置div，并在容器内垂直放置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> 

Answer 1

我想你想要的东西如下。

 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> 

Answer 2

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

以下是两个一般的定心解决scheme。

一个用于垂直alignment的弹性项目（ flex-direction: column ），另一个用于水平alignment的flex项目（ 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 （不包括装饰风格）

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

DEMO

---

当flex项目水平堆叠时：

从上面的代码调整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

---

集中Flex项目的内容

flex格式上下文的范围仅限于父子关系。 儿童之外的柔性容器的后代不参与柔性布局，并将忽略柔性属性。 从本质上讲，flex属性不能在孩子之外inheritance。

因此，您将始终需要将display: flex或display: 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 */ } 

更多细节在这里： 如何垂直alignmentflexbox内的文本？

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

 p { margin: auto; } 

在此了解Flex auto边距： alignmentFlex项目的方法 （参见框＃56）。

---

居中多行的弹性项目

当一个柔性容器有多行（由于包装）， align-content属性将是必要的交叉轴alignment。

从规格：

8.4。 打包Flex线： align-content属性

align-content属性在横轴上有额外的空间时，在flex容器中alignmentflex容器的行，类似于justify-content在主轴内alignment单个项目的方式。 请注意，此属性对单行flex容器没有影响。

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

---

浏览器支持

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

---

针对旧版浏览器的定位解决scheme

对于使用CSS表和定位属性的替代定位解决scheme，请参阅此答案： https : //stackoverflow.com/a/31977476/3597276

Answer 3

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

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; 

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

祝你好运。

Answer 4

加

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

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

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

Answer 6

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 7

使用CSS +

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

看看这里