8种垂直居中的方法

最新推荐文章于 2025-02-05 08:36:06 发布

Bejpse

最新推荐文章于 2025-02-05 08:36:06 发布

阅读量1k

点赞数

分类专栏：前端 html 文章标签： sass 前端 css

本文链接：https://blog.csdn.net/Bejpse/article/details/123344030

版权

八种垂直居中的方法

垂直居中的需求经常遇到，通过资料实践了八种垂直居中的方法。

以下的方法都围绕着该HTML展开
HTML代码

    <div  class="wrap">
        <div  class="box"></div>
    </div>

CSS
方法1（常用）：display：flex

.wrap{
	width:300px;
	height:300px;
    border: 1px solid red;
    display:flex;
    justify-content:center;
    align-items:center;
}
.box{
	height:100px;
	width:100px
    boder:1px solid blue;
}

方法2： table-cell

vertical-align 属性设置一个元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

        .wrap{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }