Flexbox：水平和垂直居中

我认为你想要像下面这样的东西。

html, body {height: 100%;}body {margin: 0;}.flex-container {height: 100%;padding: 0;margin: 0;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/

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

对齐项：居中；-->

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

祝你好运。

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

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

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

在这两种情况下，居中div的高度可以是可变的，未定义的，未知的，无论什么。居中div的高度并不重要。

以下是两者的超文本标记语言：

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

演示

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

演示

将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: auto应用于flex项的内容元素。

p { margin: auto; }

在此处了解flexauto边距：对齐Flex项目的方法（见框#56）。

将多行柔性项目居中

当flex容器有多行（由于包装）时，align-content属性对于跨轴对齐是必要的。

从规范：

8.4。包装柔性线：align-content属性

align-content属性对齐flex容器中的行交叉轴上有额外空间时的柔性容器，类似于justify-content如何在主轴内对齐单个项目。请注意，此属性对单行flex容器没有影响。

更多详情：什么是flex-的工作与line-self，line-项目和line-content？

浏览器支持

所有主流浏览器都支持Flexbox，除了IE<10。一些最新的浏览器版本，如Safari8和IE10，需要供应商前缀。要快速添加前缀，请使用自动修复器。更多详细信息请参见这个答案。

针对旧浏览器的居中解决方案

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

使用css+

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

看看这里

如果您需要在链接中居中显示文本，这将起到作用：

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>

添加

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

到您想要居中的任何容器元素。文档：验证内容和对齐项.

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>

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

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

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

以下是CSS的示例：

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

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>

你可以利用

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>

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用于对您的“项目”进行分组并将它们按列排序。

希望这能有所帮助。

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

您可以将flex-direction:column添加到弹性容器

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

将显示方式：inline-block添加到项目名称

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

因为您添加的#0对此元素没有影响，因为它的显示为#1。尝试添加#2或#3。了解更多关于宽度和高度。

还添加到行类（给定row{}而不是样式）

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

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

使用这个：

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

对于像这样的超文本标记语言：

   <html><body><main><button> abc </button><p> something </p></main></body></html>

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

   <html><body><main><button> abc </button><p> something </p></main></body></html>