居中问题
2018-04-26 本文已影响0人
月尚
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin: 0;
}
.dome1{
width: 200px;
height: 200px;
background-color: red;
/*绝对定位，脱离文档流，先对于body定位*/
position: absolute;
top: 50%;
left: 50%;
/*这是div的左上角在页面的正中心，整个div还是没有完全位于正中间*/
/*下面的写法是还是不能达到目的*/
/*margin-top: 50%;*/
/*margin-left: 50%;*/
}
</style>
<meta charset="UTF-8">
<title>居中问题</title>
</head>
<body>
<div class="dome1"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin: 0;
}
.dome1{
width: 200px;
height: 200px;
background-color: red;
/*负值*/
margin-left: -100px;
}
.dome2{
width: 200px;
height: 200px;
background-color: orange;
/*绝对定位*/
position: absolute;
/*position: fixed;*/
left: 50%;
top: 50%;
/*此时左上角在文档中心*/
/*再设置外边距负值，往回走*/
margin-left: -100px; /*宽度的一半*/
margin-top: -100px; /*高度的一半*/
/*这样是在文档居中*/
/*如果需要再可视区窗口居中，把 position 的值设置成 fixed 即可*/
}
</style>
<meta charset="UTF-8">
<title>居中问题2负值的运用</title>
</head>
<body>
<!-- <div class="dome1"></div> -->
<div class="dome2"></div>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
