在前端开发中，设计师和开发者经常需要实现元素的水平垂直居中。在 Flexbox 布局出现之前，实现这一效果往往需要使用复杂的 CSS 技巧，但是现在，使用 Flexbox 布局可以轻松实现这一效果。本文将介绍 11 种方法，详细讲解每种方法的实现原理和使用场景，并提供示例代码供读者参考。
方法一：使用 flex 容器的 align-items 和 justify-content 属性
这种方法是最基本的方法，只需要将父元素设置为 flex 容器，然后设置 align-items 和 justify-content 属性即可。其中，align-items 属性用于设置垂直居中方式，justify-content 属性用于设置水平居中方式。
// javascriptcn.com 代码示例
<style>
.flex-container {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
<div class="flex-container">
<div class="box"></div>
</div>方法二：使用 margin 属性
这种方法比较简单，只需要将元素的 margin 设置为 auto 即可。但是需要注意的是，该方法只适用于元素的宽高已知的情况。
// javascriptcn.com 代码示例
<style>
.box {
width: 100px;
height: 100px;
margin: auto;
background-color: #f00;
}
</style>
<div class="box"></div>方法三：使用绝对定位和 transform 属性
这种方法需要将元素设置为绝对定位，然后使用 transform 属性进行居中。其中，translate 属性可以设置元素相对于父元素的偏移量，从而实现居中效果。
// javascriptcn.com 代码示例
<style>
.box {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f00;
}
</style>
<div class="box"></div>方法四：使用绝对定位和 margin 属性
这种方法与方法三类似，也需要将元素设置为绝对定位。但是不同的是，使用 margin 属性进行偏移量的设置。
// javascriptcn.com 代码示例
<style>
.box {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
background-color: #f00;
}
</style>
<div class="box"></div>方法五：使用 table 属性
这种方法需要将父元素设置为 table，子元素设置为 table-cell，然后使用 vertical-align 和 text-align 属性进行居中。
// javascriptcn.com 代码示例
<style>
.table {
display: table;
height: 200px;
width: 100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
<div class="table">
<div class="table-cell">
<div class="box"></div>
</div>
</div>方法六：使用 line-height 属性
这种方法需要将父元素的 line-height 属性设置为与其高度相等的值，然后将子元素的 line-height 属性设置为 1，即可实现垂直居中。
// javascriptcn.com 代码示例
<style>
.box-container {
height: 200px;
line-height: 200px;
text-align: center;
}
.box {
display: inline-block;
line-height: 1;
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
<div class="box-container">
<div class="box"></div>
</div>方法七：使用 calc 函数
这种方法需要使用 calc 函数计算出元素的偏移量，从而实现居中效果。
// javascriptcn.com 代码示例
<style>
.box {
width: 100px;
height: 100px;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
background-color: #f00;
}
</style>
<div class="box"></div>方法八：使用 grid 布局
这种方法需要将父元素设置为 grid 容器，然后使用 justify-items 和 align-items 属性进行居中。
// javascriptcn.com 代码示例
<style>
.grid-container {
display: grid;
height: 200px;
justify-items: center;
align-items: center;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
<div class="grid-container">
<div class="box"></div>
</div>方法九：使用 flexbox 布局的 order 属性
这种方法需要将父元素设置为 flex 容器，然后使用 order 属性将子元素的顺序改变，从而实现居中效果。
// javascriptcn.com 代码示例
<style>
.flex-container {
display: flex;
height: 200px;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
order: 1;
margin: auto;
}
.spacer {
flex-grow: 1;
}
</style>
<div class="flex-container">
<div class="spacer"></div>
<div class="box"></div>
<div class="spacer"></div>
</div>方法十：使用 flexbox 布局的 flex-grow 属性
这种方法需要将父元素设置为 flex 容器，然后使用 flex-grow 属性将子元素的高度设置为与父元素相等的值，从而实现垂直居中。
// javascriptcn.com 代码示例
<style>
.flex-container {
display: flex;
height: 200px;
}
.box {
width: 100px;
background-color: #f00;
flex-grow: 1;
}
</style>
<div class="flex-container">
<div class="box"></div>
</div>方法十一：使用 flexbox 布局的 align-self 属性
这种方法需要将父元素设置为 flex 容器，然后使用 align-self 属性将子元素进行垂直居中。
// javascriptcn.com 代码示例
<style>
.flex-container {
display: flex;
height: 200px;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
align-self: center;
}
</style>
<div class="flex-container">
<div class="box"></div>
</div>总结
以上是 Flexbox 布局下解决水平垂直居中问题的 11 种方法。不同的方法适用于不同的场景，开发者可以根据具体情况选择合适的方法。Flexbox 布局是现代前端开发中不可或缺的一部分，掌握其相关知识对于开发者来说非常重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650d0f6a95b1f8cacd6d1b30