塊級元素水平垂直居中方法
阿新 • • 發佈：2019-01-08
一、加padding減height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0; padding: 0;
}
.box1 {
width: 200px;
height 
垂直水平居中方法一：
- padding-top:（box2高度-box1高度）/ 2
- height: 原height值 - padding-top值
- box2：
margin: 0 auto（脫離標準流的盒子該屬性值失效）優缺點：
- 要先知道盒子的寬高，居中盒子不能脫離標準流
二、子絕父相
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0; padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: #aaa;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
垂直水平居中方法二：
- box1
positon: realtive&& box2position: absolute- box2: top: 50% , margin-top: -(height/2)
- box2: left: 50% , margin-left: -(width/2)
優缺點：
- 要先知道盒子的寬高
注：
- box2盒子直接使用
position: relative或positon: absolute- left: top: 或 right: bottom:
- box2盒子有border屬性時，margin-top與margin-left要減去border的寬
三、margin: auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0; padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: #aaa;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
/* 以下是垂直水平居中關鍵程式碼 */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
垂直水平居中方法三：
- box1
positon: realtive&& box2position: absolute- box2盒子 top、left、bottom、right值都設為0
- box2盒子 新增
margin: auto- box2盒子有border屬性時，不影響水平垂直居中
優缺點：
- 可以不需要知道盒子的寬高就能居中
- 盒子需脫離標準流（
positon: absolute），margin: auto垂直方向居中才有效
四、transform: translate(-50%, -50%)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0; padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: #aaa;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
/* 以下是垂直水平居中關鍵程式碼 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box1">box1
<div class="box2">box2</div>
</div>
</body>
</html>
垂直水平居中方法四：
- box1
positon: realtive&& box2position: absolute- box2: top: 50%；left: 50%
- box2盒子使用 css3屬性
transform: translate(-50%, -50%)代替margin實現偏移量，偏移量根據自身盒子寬高用百分比進行寬高偏移- box2盒子有border屬性時，不影響水平垂直居中
優缺點：
- 可以不需要知道盒子的寬高就能居中
- 暫無發現居中屬性值失效問題
五、display:table-cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0; padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: #aaa;
display: table-cell;
vertical-align: middle;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
優缺點：
- box1浮動，
display: table-cell失效（垂直方向）- box2浮動，
margin: 0 auto失效（水平方向）