div盒子在页面中水平垂直居中的几种方法。

最新推荐文章于 2023-09-20 13:51:42 发布

林猛男

最新推荐文章于 2023-09-20 13:51:42 发布

阅读量5.7k

点赞数 2

分类专栏：【10】CSS 文章标签：盒子问题 css html 水平垂直居中

本文链接：https://blog.csdn.net/longgeaisisi/article/details/76539678

版权

【10】CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

方法一：设置绝对定位absolute，然后margin为自动

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        #container {
            width: 600px;
            height: 500px;
            border: 1px solid #000;
            margin:auto;
            position:absolute;
            background-color: #0096e6;
            left:0;
            right:0;
            bottom:0;
            top:0;
        }
    </style>
</head>
<body>
    <div id="container">
    </div>
</body>
</html>

方法二：用了绝对定位position:absolute，使用left和top设置对象距离上和左为50%，但如果设置50%，实际上盒子是没有实现居中效果，所以又设置margin-left:-200px;margin-top:-100px。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>上下垂直居中 blhere</title>
    <style>
        #main {position: absolute;
            width:400px;
            height:200px;
            left:50%;
            top:50%;
            margin-left:-200px;
            margin-top:-100px;
            border:1px solid #00F;
            background-color: antiquewhite;
        }
    </style>
<body>
<div id="main">DIV水平居中和上下垂直居中</div>
</body>
</html>