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

来源：互联网发布：java socket拒绝ip连接编辑：程序博客网时间：2024/04/24 06:51

方法一：设置绝对定位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>

阅读全文

1 0