如何使用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>
<!--结束片段-->。
我认为你要的是类似以下的东西。
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>
<!--结束片段-->。
请看演示:
如果你想让高度和顶部/底部填充正常工作,你的.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/
以下是两种通用的居中解决方案。
一个是垂直对齐的柔性项目(flex-direction: column
),另一个是水平对齐的柔性项目(flex-direction: row
)。
在这两种情况下,居中的Divs的高度可以是可变的、未定义的、未知的,等等。居中的Divs的高度并不重要。
以下是两种情况的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-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](
3/)因此,你总是需要将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 */
}
更多细节请见:https://stackoverflow.com/q/25311541/3597276
另外,你也可以将margin: auto
应用到flex项目的内容元素中。
p { margin: auto; }
在此了解Flex的`自动'边距。Flex项目的对齐方法 (见方框#56)。
align-content
属性对于跨轴对齐是必要的。
来自规范:
[8.4.包装柔性线:"align-content "属性]() 属性**](https://www.w3.org/TR/css-flexbox-1/#align-content-property)
align-content
属性将一个柔性容器的线条排列在 当横轴上有额外的空间时,柔性容器的线条就会对齐,类似于justify-content
如何在主轴内对齐单个项目。 注意,此属性对单行的柔性容器没有影响。
更多细节请见:https://stackoverflow.com/q/42613359/3597276
关于使用CSS表格和定位属性的另一种居中解决方案,请参见此答案:https://stackoverflow.com/a/31977476/3597276
不要忘记使用重要的浏览器特定属性。
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/
好运。
1 - 在父div上设置CSS为display.flex;
。
flex;`
2 - 在父 div 上设置 CSS 为 "flex-direction.column;<br>"。 列;
注意,这将使该div内的所有内容从上到下排列。
如果父 div 只包含子 div,而没有其他内容,这将发挥最佳效果。<br>。
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;
}
<!--结束片段-->
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>
<!--结束片段-->
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;
}
<!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>
<!--结束片段-->
<!--开始片段。 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>
<!--结束片段-->
您可以利用
display: flex; align-items: 居中。 justify-content.center;
display: flex; align-items: center; justify-content:
center;`
在您的父组件上
[![在此输入图像描述][1]][1] https://repl.it/repls/TomatoImaginaryInitialization
使用[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