一、加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: 150px;
background-color: #aaa;
padding-top: 50px; /* 加padding减height*/
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
垂直水平居中方法一:
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 && box2 position: 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 && box2 position: 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 && box2 position: 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
失效(水平方向)