【CSS基础】水平垂直居中的几种实现
2020-08-27 本文已影响0人
今夜相思又几许
前言
在找工作的时候，面试官在问到css基础的时候，基本上实现水平居中都会被问到，作为一名前端开发，此最最基本的css技能怎么会难得倒我们呢！其实这个需求在平时开发的时候也会遇到，只是我们基本上都使用自己最常用的方式，其实还有其他几种方式实现，这些我们也应该掌握。
效果图
准备
在html界面上，我写了两个div盒子，一个是类名为father的盒子，另一个是它的子盒子类名为son。如下：
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
去除一下默认的8px边距
<style>
* {
padding: 0;
margin: 0;
}
</style>
1. 定位+负margin方式（已知子盒子大小）
假设已知子盒子大小为200*200
- 父盒子添加定位
position: relative; - 子盒子添加定位
position: absolute; - 子盒子top和left都为50%
- 子盒子的
margin-top和margin-left分别设置为- 子盒子高度 / 2和- 子盒子宽度 / 2
css样式如下
/* 已知盒子大小
假如盒子大小为200*200
*/
.father {
position: relative;
height: 500px;
background-color: pink;
}
.son {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
background-color: purple;
}
2. 定位+margin: auto方式（已知子盒子大小）
假设已知子盒子大小为200*200
- 父盒子添加定位
position: relative; - 子盒子添加定位
position: absolute; - 子盒子的
top、left、right、bottom都设置为0 - 子盒子
margin设置为auto
css样式如下
/* 已知盒子大小
假如盒子大小为200*200
*/
.father {
position: relative;
height: 500px;
background-color: pink;
}
.son {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 200px;
height: 200px;
margin: auto;
background-color: purple;
}
3. 定位+transform
此方法最为常见，因为盒子的大小可以是未知的
- 父盒子添加定位
position: relative; - 子盒子添加定位
position: absolute; - 子盒子
top和left
css样式如下
.father {
position: relative;
height: 500px;
background-color: pink;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: purple;
}
效果图
4. flex-box布局实现
该布局也比较常用，因为简单快捷
- 父盒子设置
display: flex;（默认方向为row，即flex-direction: row;） - 父盒子设置主轴对齐方式为center，
justify-content: center; - 父盒子设置交叉轴对齐方式为center，
align-items: center;
css样式如下
.father {
display: flex;
/* flex-direction: row; */
justify-content: center;
align-items: center;
height: 500px;
background-color: pink;
}
.son {
background-color: purple;
}
5. flex-box + margin: auto
此方法最常用，也最简单。给设置为flex布局，子盒子margin设置为auto。
css代码
.father {
display: flex;
height: 500px;
background-color: pink;
}
.son {
margin: auto;
background-color: purple;
}
6. table-cell实现
table-cell外层需要有个table的父盒子，table-cell中的子盒子拥有行内元素的特性
布局
<body>
<div class="father">
<div class="son">
<div class="middle">我是居中的盒子呀</div>
</div>
</div>
</body>
css样式
.father {
display: table;
width: 100%;
height: 500px;
background-color: pink;
}
.son {
display: table-cell;
text-align: center;
vertical-align: middle;
background-color: purple;
}
.middle {
display: inline-block;
background-color: lightgreen;
}
效果图
总结
至此，几种水平垂直居中的css方案就介绍到这里。其中，项目中比较常用的是方案3、方案4和方案5，但是兼容性比较差，低版本的IE不太支持。可以选择方案6进行解决~
