div盒子水平居垂直中的幾種方法
阿新 • • 發佈：2019-04-06
orm eight adding 使用 top height tran mar left
div盒子水平居垂直中的幾種方法
<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8"/>
<style>
*{
margin: 0;
padding: 0;
}
/*方案1、使用transforms屬性的translate平移*/
.div1{
position: absolute;
height: 500px;
border: 1px solid #000;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.div2{
position: absolute;
width: 250px;
height: 300px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
margin 負間距
/*
1.必需知道該div的寬度和高度， 2.然後設置位置為絕對位置， 3.距離頁面窗口左邊框和上邊框的距離設置為50%，這個50%就是指盒子左上角頂點距離頁面左、上邊界的50%， 4.最後將該div分別左移和上移，使整個盒子居中，左移和上移的大小就是該DIV(包括border和padding)寬度和高度的一半。
.div3{
position: absolute;
width: 100px;
height: 50px;
border: 1px solid#000;
margin-top: -26px;
margin-left: -51px;
left: 50%;
top: 50%;
} </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8"/>
<style>
*{
margin: 0;
padding: 0;
}
/*方案1、使用transforms屬性的translate平移*/
.div1{
position: absolute;
height: 500px;
border: 1px solid #000;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.div2{
position: absolute;
width: 250px;
height: 300px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
margin 負間距
/*
1.必需知道該div的寬度和高度， 2.然後設置位置為絕對位置， 3.距離頁面窗口左邊框和上邊框的距離設置為50%，這個50%就是指盒子左上角頂點距離頁面左、上邊界的50%， 4.最後將該div分別左移和上移，使整個盒子居中，左移和上移的大小就是該DIV(包括border和padding)寬度和高度的一半。
.div3{
position: absolute;
width: 100px;
height: 50px;
border: 1px solid#000;
margin-top: -26px;
margin-left: -51px;
left: 50%;
top: 50%;
} </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
div盒子水平居垂直中的幾種方法