Flexbox:水平和垂直居中

Question

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

我想你想要的东西如下.

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>

请参阅演示:http://jsfiddle.net/audetwebdesign/tFscL/

你的.flex-item元素应该是块级(div而非span)如果你想要的高度和顶部/底部填充才能正常工作.

此外,打开.row,设置宽度auto而不是100%.

你的.flex-container房产很好.

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

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

附注:
本flex-flow,flex-direction,flex-wrap性能会犯这样的设计更容易实现.我认为.row除非你想在元素周围添加一些样式(背景图像,边框等),否则不需要容器.

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

Answer 2

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

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

一个用于垂直对齐的flex项目(flex-direction: column),另一个用于水平对齐的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(装饰风格除外)

当弹性项目垂直堆叠时:

#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布局,并将忽略flex属性.从本质上讲,flex属性在子级之外是不可继承的.

因此,您始终需要应用display: flex或display: inline-flex父元素才能将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 */
}

更多细节:如何在Flexbox中垂直对齐文本？

或者,您可以应用margin: autoFlex项目的content元素.

p { margin: auto; }

auto在此处了解弹性边距:对齐Flex项目的方法(参见方框#56).

居中多行柔性物品

当Flex容器有多条线(由于包装)时,该align-content属性将是跨轴对齐所必需的.

从规格:

8.4.包装Flex Lines:align-content 属性

align-content当横轴上有额外的空间时,属性会在flex容器内对齐flex容器的线,类似于justify-content在主轴内对齐各个项的方式. 请注意,此属性对单行Flex容器没有影响.

更多细节:flex-wrap如何使用align-self,align-items和align-content？

浏览器支持

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

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

对于使用CSS表和定位属性的替代中心解决方案,请参阅以下答案:https://stackoverflow.com/a/31977476/3597276

Answer 3

加

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

到任何你想要居中的容器元素.文档: justify-content和 align-items.

Answer 4

你可以利用

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

在您的父组件上

Answer 5

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

align-items:center; - >

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: 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 6

用这个：

   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>
        <main>
          <button> abc </button>
          <p> something </p>
        </main>
      </body>
    </html>

   html, body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
   }

Answer 7

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

2 - 在父div上设置CSS以flex-direction: column;
注意这将使该div中的所有内容从上到下排列.如果父div仅包含子项而不包含任何其他内容,则此方法最有效.

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

以下是CSS的示例:

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

Answer 8

diplay: flex;因为它是容器，而且margin:auto;它的项目也很完美。

注意：您必须设置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 9

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>