Flex实现元素的水平居中和垂直居中

最新推荐文章于 2025-11-24 18:16:06 发布

转载最新推荐文章于 2025-11-24 18:16:06 发布 · 3.1w 阅读

文章标签：

#flex布局

flex 专栏收录该内容

1 篇文章

订阅专栏

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来让所有子项目在垂直方向上居中。