文章目录
- 通过relative定位
-
- 实例
- 兼容性
- 通过absolute定位
-
- 实例
- 兼容性
- 通过flex布局（1）
-
- 实例
- 兼容性
- 通过flex布局（2）
-
- 实例
- 兼容性
通过relative定位
这种方法的思路是，使用relative将元素相对父元素下移50%，在通过transform使元素相对自身上移50%，这样元素就处在父元素的正中间了，示意图：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change-to-flex</title>
<style>
body {
margin: 0;
}
.border {
height: 100px;
width: 100px;
border: 2px solid blue;
display: inline-block;
}
.item {
width: 40px;
height: 40px;
background-color: red;
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="border">
<div class=item></div>
</div>
</body>
</html>
运行：
注意：
- 通过这种方式垂直居中，父元素的高度必须是确定的，因为top:50%是通过父元素的高度计算的（如果left:50%就不会要求父元素的宽度确定，查资料说因为block的元素的宽默认是父元素的100%）
- 还有一个容易被忽视的就是：父元素的display不能是
、table
、contents
inline
兼容性
这种方式需要用到css3的transform 2d转换，兼容性见下图：
通过absolute定位
通过absolute的思路是，将要垂直居中的元素的position设置为absolute，然后将它的top和bottom均设置为0，再设置它的margin-top和margin-bottom为auto，则它会上下垂直居中，我们通常用这个思路来实现水平居中，其实它也是可以实现垂直居中的
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change-to-flex</title>
<style>
body {
margin: 0;
}
.border {
width: 100px;
height: 100px;
border: 2px solid blue;
position: relative
}
.item {
width: 40px;
height: 40px;
background-color: red;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
</style>
</head>
<body>
<div class="border">
<div class=item></div>
</div>
</body>
</html>
运行：
兼容性
position是css很早就有的一个属性，兼容性无疑是十分好的（position为sticky的兼容性不是十分好）
注意：
- 注意要将需要垂直的居中元素的父元素的position设置为relative，使得abolute的相对对象为父元素
通过flex布局（1）
思路很简单，通过flex布局的特性配合margin实现
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change-to-flex</title>
<style>
body {
margin: 0;
}
.border {
width: 100px;
height: 100px;
border: 2px solid blue;
display: flex;
}
.item {
width: 40px;
height: 40px;
background-color: red;
margin: auto 0;
}
</style>
</head>
<body>
<div class="border">
<div class=item></div>
</div>
</body>
</html>
运行：
兼容性
使用flex布局，需要考虑到flex的兼容性问题：
通过flex布局（2）
这种方式也是利用flex布局，不同上面的是，它配合flex自带的交叉轴居中属性
align-items: center
来实现垂直居中
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change-to-flex</title>
<style>
body {
margin: 0;
}
.border {
width: 100px;
height: 100px;
border: 2px solid blue;
display: flex;
align-items: center;
}
.item {
width: 40px;
height: 40px;
background-color: red;
}
</style>
</head>
<body>
<div class="border">
<div class=item></div>
</div>
</body>
</html>
运行：
兼容性
同上