CSS——几种让一个容器水平垂直居中的方法

最新推荐文章于 2025-05-25 07:23:59 发布

YuanlongWang

最新推荐文章于 2025-05-25 07:23:59 发布

阅读量3.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 容器垂直居中

本文链接：https://blog.youkuaiyun.com/lwpoor123/article/details/75213623

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了四种让容器在网页中实现水平垂直居中的CSS方法，包括position加margin、display:table-cell、position加transform和display:flex，每种方法均有详细的代码示例。

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

让一个容器水平垂直居中有多种方法，下面介绍简单的几种：

方法一：position加margin

先上代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS——如何让一个容器水平垂直居中</title>
<style>
    .div1{
        width:400px;
        height:400px;
        position:relative;
        background:#eee;
    }
    .div2{
        width:200px;
        height:200px;
        position:absolute;
        background:#f00;
        margin:auto;
        left:0;
        right:0;
        top:0;
        bottom:0;
    }
</style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    <div>
</body>
</html>

运行如下：
这里写图片描述

首先设置父容器布局方式为相对布局：
position:relative;其次设计子容器的布局方式为绝对布局：position:absolute;margin值设置为自适应：margin:auto；

.div1{
        width:400px;
        height:400px;
        position:relative;
        background:#eee;
    }
    .div2{
        width:200px;
        height:200px;
        position:absolute;
        background:#f00;
        margin:auto;
    }

这里写图片描述

看似还没有任何变化，关键来了，当设置left:0;right:0;时容器会水平居中：

.div1{
        width:400px;
        height:400px;
        position:relative;
        background:#eee;
    }
    .div2{
        width:200px;
        height:200px;
        position:absolute;
        background:#f00;
        margin:auto;
        left:0;
        right:0;
    }

这里写图片描述

当设置left:0;right:0;top:0;bottom:0;容器自然就水平垂直居中了；

当知道容器高度时，还可以设置top:50%;margin-top:-100px;使其垂直居中；

.div1{
        width:400px;
        height:400px;
        position:relative;
        background:#eee;
    }
    .div2{
        width:200px;
        height:200px;
        position:absolute;
        background:#f00;
        left:50%;
        top:50%;
        margin-top:-100px;
        margin-left:-100px;
    }

因为当设置top:50%;时，子容器会向下偏移父容器高度的50%；
这里写图片描述
在设置margin-top:-100px;子容器向上偏移该容器高度的一半，正好垂直居中。

同理当设置left:50%;时，子容器会向右偏移父容器宽度的50%；
在设置margin-left:-100px;子容器向左偏移该容器宽度的一半，正好水平居中。

该方法适用于所有浏览器

方法二： diaplay:table-cell

<style>
    .div1{
         width: 200px;
        height: 200px;
        background: yellow;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .div2{
        display: inline-block;
        vertical-align: middle;
        width: 100px;
        height: 100px;
        background: green;
    }
</style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    <div>
</body>

这里写图片描述
display: table-cell;让标签元素以表格单元格的形式呈现；
vertical-align: middle;让内容垂直居中（需在在表单元格中）；
text-align: center;让内容水平居中；
display: inline-block;将对象呈递为内联对象，但是对象的内容作为块对象呈递；

方法三：position加 transform

<style>
    .div1{
        position: relative;
        background: yellow;
        width: 200px;
        height: 200px;
    }
    .div2{
        position: absolute;
        background: green;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);     transform:translate(-50%,-50%);
        width: 100px;
        height: 100px;
    }
</style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    <div>
</body>

首先设置top:50%;left:50%;让子容器向下、向右偏移父容器高宽的一半；
这里写图片描述
然后设置transform:translate(-50%,-50%);让子容器向X、Y轴左上偏移子容器的一半宽高，这样正好居中；
兼容性：ie9以下不支持 transform，手机端表现的比较好。

方法四：display:flex;弹性布局

<style>
    .div1{
        background: yellow;
        width: 200px;
        height: 200px;
        display: flex; 
    }
    .div2{
        background: green;
        width: 100px;
        height: 100px;
        margin: auto;
    }
</style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    <div>
</body>

display:flex;设置弹性布局;
也可以这样写：

.div1{
        background: yellow;
        width: 200px;
        height: 200px;
        display: flex; 
        align-items: center; 
        justify-content: center;
    }
    .div2{
        background: green;
        width: 100px;
        height: 100px;
    }

align-items: center;设置水平居中；
align-items: center; 设置垂直居中；

移动端首选

总结：
如果是移动端，使用display:flex;弹性布局会比较方便；
如果pc端，考虑浏览器兼容问题，可以使用position布局；

.div1{
        width:400px;
        height:400px;
        position:relative;
        background:#eee;
    }
    .div2{
        width:200px;
        height:200px;
        position:absolute;
        background:#f00;
        left:50%;
        top:50%;
        margin-top:-100px;
        margin-left:-100px;
    }