一、Html中垂直居中的几个方法

1、利用绝对定位来实现垂直居中

父级元素（相对定位） position: relative;
子级元素（绝对定位） position: absolute;

a.利用transform样式旋转div实现

.content{
	height: 400px;
    width: 400px;
    box-sizing: border-box;
    border: 1px solid;
}
.box{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    box-sizing: border-box;
    background-color: #57faff;
    border: 1px dashed red;
}
.content_1{
	position: relative;
}
.box_1{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

<div class="content content_1">
    <div class="box box_1"></div>
</div>

b.利用margin: auto实现

.content_2{
	position: relative;
}
.box_2{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

<div class="content content_2">
    <div class="box box_2"></div>
</div>

2、flex布局

利用flex弹性布局

.content_3{
	display: flex;
	align-items: center; /** 垂直居中 **/
	justify-content: center; /** 水平居中 **/
}

<div class="content content_3">
    <div class="box box_3"></div>
</div>

3、table-cell实现水平垂直居中

让标签元素以表格单元格的形式呈现，使元素类似于td标签（ps: 水平居中，需要设置块状元素才能使用，否则无法居中）

.content_4{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.box_4{
	display: inline-block; /** 设置成行内块元素 **/
}

<div class="content content_4">
    <div class="box box_4"></div>
</div>

二、方案效果图

在这里插入图片描述

三、完成html页面代码

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="title" content="垂直居中方案">
    <meta name="author" content="cxj">
    <style>
        body,html{
            height: 100%;
            width: 100%;
            font-size: 14px;
        }
        .main{
            display: flex;
        }
        .plan{
            margin-left: 20px;
        }
        .plan:first-of-type{
            margin-left: 0;
        }
        .title{
            margin-bottom: 5px;
        }
        .content{
            height: 400px;
            width: 400px;
            box-sizing: border-box;
            border: 1px solid;
        }
        .box{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            box-sizing: border-box;
            background-color: #57faff;
            border: 1px dashed red;
        }
        /** 利用绝对定位,(top:50%;transform:translate(-50%,-50%)) **/
        .content_1{
            position: relative;
        }
        .box_1{
            top: 50%;
            position: absolute;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        /** 利用绝对定位,(top/bottom/left/right:0;margin:auto;) **/
        .content_2{
            position: relative;
        }
        .box_2{
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        /** flex布局方法 **/
        .content_3{
            display: flex;
            align-items: center; /** 垂直居中 **/
            justify-content: center; /** 横向居中 **/
        }
        /** table-cell实现水平垂直居中: table-cell middle center组合使用 **/
        .content_4{
            display: table-cell; /** 只能是块状元素，否则只能垂直居中，无法水平居中 **/
            vertical-align: middle;
            text-align: center;
        }
        .box_4{
            display: inline-block; /** 设置成块状元素 **/
        }
    </style>
</html>
<body>
    <div class="main">
        <div class="plan">
            <div class="title">
                <div>垂直居中方案一:</div>
                <div>绝对定位 + transform</div>
            </div>
            <div class="content content_1">
                <div class="box box_1"></div>
            </div>
        </div>
        <div class="plan">
            <div class="title">
                <div>垂直居中方案二:</div>
                <div>绝对定位 + margin</div>
            </div>
            <div class="content content_3">
                <div class="box box_3"></div>
            </div>
        </div>
        <div class="plan">
            <div class="title">
                <div>垂直居中方案三:</div>
                <div>flex布局方法</div>
            </div>
            <div class="content content_3">
                <div class="box box_3"></div>
            </div>
        </div>
        <div class="plan">
            <div class="title">
                <div>垂直居中方案四:</div>
                <div>table-cell</div>
            </div>
            <div class="content content_4">
                <div class="box box_4"></div>
            </div>
        </div>
    </div>
</body>
# html # css # css3
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

GaussDB数据库SQL系列-复合查询

avatar 华为云开发者联盟