flex容器内子元素的float、clear和vertical-align属性将失效，所有子元素自动成为容器成员flex item，即“项目”。
水平居中
justify-content属性定义了项目在主轴（水平）上的对齐方式。
justify-content可取值：
flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等（类似margin-left = margin-right）。所以，项目之间的间隔比项目与边框的间隔大一倍。
1. 单个元素水平居中
//css .box{ display:flex; justify-content:center; background:#0099cc } h1{ color:#FFF } //html <div class="box"> <h1>flex弹性布局justify-content属性实现元素水平居中</h1> </div> 不需要对目标元素设置任何样式，如：width，margin。
2. 多个元素水平居中
//css .box{ display:flex; justify-content:center; width:100%; background:#0099cc } h1{ font-size:1rem; padding:1rem; border:1px dashed#FFF; color:#FFF; font-weight:normal; } //html <div class="box"> <h1>flex弹性布局justify-content属性实现元素水平居中</h1> <h1>flex弹性布局justify-content属性实现元素水平居中</h1> <h1>flex弹性布局justify-content属性实现元素水平居中</h1> </div> 元素垂直居中
align-items属性定义项目在交叉轴（垂直）上如何对齐。
align-items可取值：
flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度。
1. 单个元素垂直居中
//css .box{ display:flex; width:980px; height:30rem; align-items:center; background:#0099cc } h1{ font-size:1rem; padding:1rem; border:1px dashed#FFF; color:#FFF
}
//html
<div class="box"> <h1>flex弹性布局align-items属性实现垂直居中</h1> </div> 2. 多个元素并排垂直居中
//css .box{ display:flex; width:980px; height:30rem; align-items:center; background:#0099cc } h1{ font-size:1rem; padding:1rem; border:1px dashed #FFF; color:#FFF } //html <div class="box"> <h1>flex弹性布局align-items属性实现垂直居中</h1> <h1>flex弹性布局align-items属性实现垂直居中</h1> <h1>flex弹性布局align-items属性实现垂直居中</h1> </div> 如果想父元素水平居中，你只需要给body标签一个属性就OK了。代码如下：
body{ display:flex; justify-content:center; } 3. 多行元素垂直居中
//css body{ display:flex; justify-content:center } .box{ display:flex; width:980px; height:30rem; justify-content:center; background:#0099cc; flex-direction:column; align-items:center; } h1{ display:flex; justify-content:center; font-size:1rem; padding:1rem; border:1px dashed #FFF; color:#FFF; width:28rem
}
//html
<div class="box"> <h1>flex弹性布局align-items属性实现垂直居中</h1> <h1>flex弹性布局align-items属性实现垂直居中</h1> <h1>flex弹性布局align-items属性实现垂直居中</h1> <h1>flex弹性布局align-items属性实现垂直居中</h1> </div> 由于弹性容器.box添加了display:flex;属性，子项目默认是水平排列的，所以给.box追加一个flex-direction:column属性来让子项目垂直排列。此时垂直方向作为主轴，所以我们可以使用justify-content:center来让所有子项目在垂直方向上居中。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/230433.html原文链接：https://javaforall.net
