两种在屏幕正中心水平与垂直居中的方法
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style></style>
</head>
<body>
<div id="box">
<h1>兵者诡道也</h1>
</div>
</html>
CSS代码:
用绝对定位,设置margin属性值为auto,设置left,right,top,bottom值相同,可以不为0;
方法一:
* {
margin: 0;
padding: 0;
}
body {
background-color: #cc3e40;
}
#box {
position: absolute;
top: 0;
letf: 0;
right: 0;
bottom: 0;
margin: auto;
width: 300px;
height: 300px;
background: #fff;
}
效果: