<!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還是沒有完全位于正中間*/
/*下面的寫法是還是不能達(dá)到目的*/
/*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;
/*負(fù)值*/
margin-left: -100px;
}
.dome2{
width: 200px;
height: 200px;
background-color: orange;
/*絕對定位*/
position: absolute;
/*position: fixed;*/
left: 50%;
top: 50%;
/*此時左上角在文檔中心*/
/*再設(shè)置外邊距負(fù)值雕凹,往回走*/
margin-left: -100px; /*寬度的一半*/
margin-top: -100px; /*高度的一半*/
/*這樣是在文檔居中*/
/*如果需要再可視區(qū)窗口居中殴俱,把 position 的值設(shè)置成 fixed 即可*/
}
</style>
<meta charset="UTF-8">
<title>居中問題2負(fù)值的運(yùn)用</title>
</head>
<body>
<!-- <div class="dome1"></div> -->
<div class="dome2"></div>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>