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在视图端口中垂直居中，请为html和body分配100％的高度，并将body边距归零。

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

<强>脚注：
flex-flow，flex-direction，flex-wrap属性可以使此设计更容易实现。我认为除非你想在元素周围添加一些样式（背景图像，边框等），否则不需要.row容器。

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

Answer 2

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

以下是两个一般的集中解决方案。

一个用于垂直对齐的弹性项目（flex-direction: column），另一个用于水平对齐的弹性项目（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 formatting context的范围仅限于父子关系。子项之外的Flex容器的后代不参与flex布局，并将忽略flex属性。从本质上讲，flex属性在子级之外是不可继承的。

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

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

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

此处有更多详情：How to vertically align text inside a flexbox?

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

p { margin: auto; }

在此处了解flex auto页边距：Methods for Aligning Flex Items（参见方框＃56）。

居中多行弹性项目

当Flex容器有多行（由于换行）时，align-content属性对于跨轴对齐是必需的。

来自规范：

  

8.4. Packing Flex Lines: the align-content property

     

align-content属性对齐Flex容器中的行   当横轴有额外的空间时，弯曲容器，类似于   justify-content如何对齐主轴内的各个项目。   注意，此属性对单行Flex容器没有影响。

此处有更多详情：How does flex-wrap work with align-self, align-items and align-content?

浏览器支持

所有主流浏览器except IE < 10都支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。 this answer中的更多详细信息。

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

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

Answer 3

添加

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

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

Answer 4

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

align-items：center; - ＆GT;

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

证明 - 内容：中心; - ＆GT;

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

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

Answer 6

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

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

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

以下是CSS的示例：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 7

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 8

您可以利用

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

在您的父组件上

https://repl.it/repls/TomatoImaginaryInitialization

Answer 9

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

＆＃13;

＆＃13;

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

＆＃13;

<div>
  <a href="#">text</a>
  <a href="#">text with two lines</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 10

margin: auto与flexbox完美配合。它垂直和水平集中。

＆＃13;

＆＃13;

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

.flex-container {
  display: flex;
    
  height: 100%;
  background-color: green;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 11

结果： documentation

代码

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：

html, body {
  height: 100%;  
}

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

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

其中flex-container div用于将rows div垂直和水平居中，而rows div用于将“项目”分组并在基于列的列中进行排序。 / p>

Answer 12

希望这会有所帮助。

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

Answer 13

您可以将FROM ubuntu:16.04 MAINTAINER NAME EMAIL RUN apt-get update RUN apt-get install -y python3 python3-pip RUN pip3 install --upgrade pip RUN pip3 install flask pymongo flask_table RUN mkdir /app RUN mkdir -p /app/data COPY service.py /app/service.py ADD data /app/data EXPOSE 5000 WORKDIR /app ENTRYPOINT [ "python3","-u", "service.py"] 添加到 flex-container

flex-direction:column

在弹性项目

中添加 display：inline-block

.flex-container {
  flex-direction: column;
}

，因为您添加的.flex-item { display: inline-block; } 对此元素没有影响，因为它的显示为width and height。尝试添加inline或display:inline-block。了解有关 width 和 height 的更多信息。

还添加到行类中（没有给出行{} 作为样式）

display:block

行内演示：

.row{
  width:100%;
  margin:0 auto;
  text-align:center;
}

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content:center;
  flex-direction:column;
}
.row{
  width:100%;
  margin:0 auto;
  text-align:center;
}
.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;
  display: inline-block;
}

列中的工作演示：

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

.flex-container {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style: none;
  display: flex;
  align-items: 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;
  display: inline-block;
}

Answer 14

.flex-container {      
  display:flex;
  flex-direction: column;
  align-items: center;
}
.flex-item {
  flex: auto;      
}

    
    <div class="flex-container">
      <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>

Answer 15

使用CSS+

lines

看看HERE