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>

<！--结束片段--&gt。

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

Michael_B
已编辑的问题 22日 十月 2016 в 9:38
编程
html5 css3 html css flexbox
26日 九月 2013 в 11:22
10 种观点
对该问题的评论 (2)
解决办法

我认为你要的是类似以下的东西。

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>
nalzok
编辑本段答案26日 十月 2016 в 9:34
评论(8)

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

以下是两种通用的居中解决方案。

一个是垂直对齐的柔性项目（flex-direction: column），另一个是水平对齐的柔性项目（flex-direction: row）。

在这两种情况下，居中的Divs的高度可以是可变的、未定义的、未知的，等等。居中的Divs的高度并不重要。

以下是两种情况的HTML：。

<div id="container">

    <div class="box" id="bluebox">
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox">
        <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 */
}

[！[在此输入图片描述][2]][2] 。

[DEMO](http://jsfiddle.net/8o29y7pd/)

当柔性项目被水平堆叠时：。

调整上述代码中的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;
}

[！[在此输入图片描述][3]][3] 。

[DEMO](http://jsfiddle.net/8o29y7pd/3/)

柔性项目的内容居中

Michael_B
编辑本段答案3日 九月 2017 в 11:07
评论(5)

添加

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

到任何你想居中的容器元素。 文档。 justify-content]1和 [align-items][2].

1:

[2]: https://developer.mozilla.org/de/docs/Web/CSS/align-items

评论(1)

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

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;

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

好运。

评论(6)

1 - 在父div上设置CSS为display.flex;
。 flex;`

2 - 在父 div 上设置 CSS 为 "flex-direction.column;<br>"。 列;
注意，这将使该div内的所有内容从上到下排列。 如果父 div 只包含子 div，而没有其他内容，这将发挥最佳效果。<br&gt。

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

下面是一个CSS的例子。

<！--开始片段。 js hide: false console.true babel: true true babel.false --> -- begin snippet: js hide: false console: true false -->

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

<！--结束片段-->

评论(0)

diplay.flex; for it's container and margin:auto; for it's item works perfect: flex;为它的容器和margin:auto;`为它的项目工作完美。

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

<！--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->

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

<！--结束片段-->

评论(0)

margin: auto与flexbox完美结合。 它在垂直和水平方向集中。

<！--开始片段。 js hide: false console.true babel: true true babel.false --> -- begin snippet: js hide: false console: true false -->

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

.flex-container {
  display: flex;

  height: 100%;
  background-color: green;
}

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



  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  JS


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

<！--结束片段-->

评论(0)

如果你需要在链接中把文字居中，这就可以做到。

<！--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->

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>

<！--结束片段-->

评论(1)

您可以利用

display: flex; align-items: 居中。 justify-content.center;display: flex; align-items: center; justify-content: center;`

在您的父组件上

[！[在此输入图像描述][1]][1] https://repl.it/repls/TomatoImaginaryInitialization

[1]: https://i.stack.imgur.com/sBAyt.png

评论(0)

使用[CSS+][1]

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

看一看[这里][2]

[1]: http://www.css.plus [2]: http://codepen.io/hicTech/pen/emvMBw

评论(1)