前端笔记之Div居中显示

最新推荐文章于 2025-06-06 22:51:36 发布

技术小白996

最新推荐文章于 2025-06-06 22:51:36 发布

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：学习文章标签： Div居中 html css

本文链接：https://blog.youkuaiyun.com/qq_43115213/article/details/93538560

学习专栏收录该内容

5 篇文章

订阅专栏

本文是前端笔记，主要介绍了Div居中显示的四种方法：1) 给div设置宽度并添加margin:0 auto实现水平居中；2) 通过设定容器宽高及外边距实现水平垂直居中；3) 使用transform属性实现未知宽高的居中；4) 利用flex布局实现居中，同时强调了实际应用中要考虑浏览器兼容性问题。

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

前端笔记之Div居中显示

1、水平居中：给div设置一个宽度，然后添加margin:0 auto属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>W3Cschool</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            background-color: #000;
        }
        #div1{
            width: 200px;
            margin: 0 auto;
            background-color: #f40;
        }
    </style>
</head>
<body>
    <div>
        <div id="div1"></div>
    </div>
</body>
</html>

在这里插入图片描述

2、水平垂直居中一

确定容器的宽高宽200 高 100 的层
设置层的外边距

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>W3Cschool</title>
    <style type="text/css">
        div{
            position: relative;
            width: 300px;
            height: 300px;
            background-color: #000;
        }
        #div1{
            position: absolute;     /* 相对定位或绝对定位均可 */
            width:200px; 
            height:100px;
            top: 50%;
            left: 50%;
            margin: -50px 0 0 -100px;      /* 外边距为自身宽高的一半 */
            background-color: #f40;     /* 方便看效果 */
        }
    </style>
</head>
<body>
    <div>
        <div id="div1"></div>
    </div>
</body>
</html>

在这里插入图片描述

3、水平垂直居中二

未知容器的宽高，利用 transform 属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>W3Cschool</title>
    <style type="text/css">
        div{
            position: relative;
            width: 300px;
            height: 300px;
            background-color: #000;
        }
        #div1{
            position: absolute;     /* 相对定位或绝对定位均可 */
            width:200px; 
            height:100px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); 
            background-color: #f40;     /* 方便看效果 */
        }
    </style>
</head>
<body>
    <div>
        <div id="div1"></div>
    </div>
</body>
</html>

在这里插入图片描述

4、水平垂直居中三

利用 flex 布局
实际使用时应考虑兼容性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>W3Cschool</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            display: flex; 
            align-items: center;        /* 垂直居中 */
            justify-content: center;    /* 水平居中 */
            background-color: #000;
        }
        #div1{
            width:200px; 
            height:100px;
            background-color: #f40;     /* 方便看效果 */
        }
    </style>
</head>
<body>
    <div>
        <div id="div1"></div>
    </div>
</body>
</html>

在这里插入图片描述