html中css使得块元素水平垂直居中的常用方法

本文链接：https://blog.youkuaiyun.com/right_hand_side/article/details/115488922

本文介绍了三种实现网页元素水平垂直居中的方法：1) 使用定位和负边距，2) 通过设置子元素宽高和绝对定位，3) 利用伸缩盒模型。每种方法都有详细的HTML和CSS代码示例，适用于不同场景的页面布局需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、自适应的方式
二、通过子元素的宽高设置
三、伸缩盒

一、自适应的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中</title>
</head>
<style>
    .parent{
        height: 100px;
        width: 200px;
        border: 1px solid #333;
        position: relative;
        margin: 100px;
    }
    .parent .child{
        height: 50px;
        width: 80px;
        background-color: rosybrown;
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
    }
</style>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

效果展示
在这里插入图片描述

二、通过子元素的宽高设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中</title>
</head>
<style>
    .parent2{
        margin: 100px;
        height: 100px;
        width: 200px;
        border: 1px solid #333;
        position: relative;
    }
    .parent2 .child{
        height: 50px;
        width: 100px;
        background-color:aquamarine;
        position: absolute;
        left: 50%;
        margin-left: -50px;
        top: 50%;
        margin-top: -25px;
       
    }
</style>
<body>
    <div class="parent2">
        <div class="child"></div>
    </div>
</body>
</html>

效果展示
在这里插入图片描述

三、伸缩盒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伸缩盒</title>
</head>
<style>
    .parent{
        width: 200px;
        height: 100px;
        margin: 100px;
        border: 1px solid #333;
        display: flex;
        align-items: center;
        justify-content: center; 
        
    }
    .item{
        width: 100px;
        height: 50px;
        background-color: burlywood;
        text-align: center;
        line-height: 50px;
</style>
<body>
    <div class="parent">
        <div class="item">伸缩盒</div>
    </div>
</body>
</html>