div水平竖直居中

怎么让一个div元素保持适中水平,竖直居中?

第一种方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#divcenter{
position:absolute;/*层漂浮*/
top:50%;
left:50%;
width:300px;
height:400px;
margin-top:-200px;/*注意这里必须是DIV高度的一半*/
margin-left:-150px;/*这里是DIV宽度的一半*/
background:black;
border:1px solid red;
}

</style>

</head>
<body>
<div id="divcenter"></div>
</body>
</html>
```
<!-- more -->

第二种方法


DIV居中演示