Html Flexbox：水平和垂直居中

如何使用flexbox在容器内水平和垂直居中div。在下面的示例中，我希望每个数字都位于彼此的下方（以行为单位），水平居中

.flex容器{
填充：0；
保证金：0；
列表样式：无；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
划船{
宽度：100%；
}
.弹性项目{
背景：番茄；
填充物：5px；
宽度：200px；
高度：150像素；
利润率：10px；
线高：150px；
颜色：白色；
字体大小：粗体；
字号：3em；
文本对齐：居中；
}

1.
2.
3.
4.

我想您需要以下内容

html，正文{
身高：100%；
}
身体{
保证金：0；
}
.柔性容器{
身高：100%；
填充：0；
保证金：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.行{
宽度：自动；
边框：1px纯蓝色；
}
.弹性项目{
背景色：番茄；
填充物：5px；
宽度：20px；
高度：20px；
利润率：10px；
线高：20px；
颜色：白色；
字体大小：粗体；
字号：2em；
文本对齐：居中；
}

1.
2.
3.
4.

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

对齐项目：居中；-->

对齐内容：中心；-->

为了更好地理解flex，您可以阅读以下两个链接： 和

祝你好运。

如何在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>

---

以弹性项的内容为中心 a的范围仅限于父子关系。子级之外的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 */
}

详情如下：

或者，您可以将

margin:auto

应用于弹性项的内容元素

p { margin: auto; }

了解flex

auto

margins（参见方框56）

---

将多行柔性项目居中 如果flex容器有多行（由于包装），则横轴对齐需要

align content

属性

根据规范：

align content

属性在 交叉轴中有额外空间时的柔性容器，类似于

justify content

如何在主轴内对齐各个项目。 注意，此属性对单行flex容器没有影响

详情如下：

---

浏览器支持 所有主要浏览器都支持Flexbox。要快速添加前缀，请使用。更多详情请参阅

---

旧浏览器的居中解决方案 有关使用CSS表格和定位属性的替代定心解决方案，请参见以下答案：

使用

编辑此文本。。。

查看一下

如果您需要将链接中的文本居中，这将实现以下功能：

div{
显示器：flex；
宽度：200px；
高度：80px；
背景颜色：黄色；
}
a{
显示器：flex；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；/*仅对多行重要*/
填充：0 20px；
背景颜色：银色；
边框：2件纯蓝；
}

添加

指向要居中的任何对象的容器元素。文档： 及

---

.

页边距：auto

与flexbox“完美”配合使用，即允许项目垂直和水平居中

html，正文{
身高：100%；
最大高度：100%；
}
.柔性容器{
显示器：flex；
身高：100%；
背景颜色：绿色；
}
.集装箱{
显示器：flex；
保证金：自动；
}

JS
1.
2.
3.
4.

1-将父div上的CSS设置为

显示：flex

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

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

下面是CSS的示例：


.parentDivClass{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
diplay:flex用于其容器和
边距：自动因为它的项目工作完美

注意：您必须设置
宽度和
高度才能看到效果


#容器{
宽度：100%；/*需要设置宽度*/
高度：150px；/*需要设置高度*/
显示器：flex；
}
.项目{
边距：自动；/*这些将使项目居中*/
背景色：#CCC；
}

居中
您可以利用

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

在父组件上

结果：

代码

HTML:

其中
flex container
div用于垂直和水平居中
行<
#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;
}

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

p { margin: auto; }

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

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

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

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

html, body {
  height: 100%;  
}

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

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

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

.flex-item {
 display: inline-block;
}

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