浅析水平垂直居中
- 浅析水平垂直居中
- 1.利用定位实现水平垂直居中
- 2.利用定位和外边距margin实现水平垂直居中
- 3.利用定位加平移实现水平垂直居中
- 4.利用表格属性实现水平垂直居中
- 5.利用vertical-align属性实现水平垂直居中
- 6.利用vertical-align属性实现水平垂直居中（2）
- 7.弹性盒实现水平垂直居中
- 8.网格布局grid布局实现水平垂直居中（gird网格布局还未发展完善，兼容性差。）
我们在日常网页编辑中，可以很简单的实现元素水平居中，但是难以做到元素水平垂直居中，本文简单的介绍了几种常用的水平居中方法。
1.利用定位实现水平垂直居中
实现原理：父元素给上相对定位作为参照物，子元素给绝对定位，定位在父元素的中心位置。
html代码如下：
css代码如下：
.a{
width: 300px;
height: 200px;
background-color:#ff0;
float: left;
margin: 20px;
position: relative;
}
.a1{
width: 100px;
height: 100px;
background-color: #ff0;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
从上面代码可以看出，我们可以使用绝对定位上下左右0加上margin：auto，实现元素的水平垂直居中。
2.利用定位和外边距margin实现水平垂直居中
实现原理：类似于第一种定位方法，结合margin属性，將属性值设为负值，实现效果。
html代码如下：
css代码如下：
.b{
width: 300px;
height: 200px;
background-color: #ff0;
float: left;
margin: 20px;
position: relative;
}
.b1{
width: 100px;
height: 100px;
background-color: #ff0;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
从上面代码可以看出，由于定位实现的是元素左上角点的水平垂直居中，并不能实现我们想要的效果，于是我们利用margin负值將元素移上去，这里注意元素中心点相当于占宽高各一半所以我们margin属性一定要设置子元素（就是要水平垂直居中的元素）的宽（对应margin-left值）高（对应margin-top值）各一半。
3.利用定位加平移实现水平垂直居中
实现原理：与方法2核心原理相同但是采用translate平移实现效果。
html代码如下：
css代码如下：
.c{
width: 300px;
height: 200px;
background-color: #ff0;
float: left;
margin: 20px;
position: relative;
}
.c1{
width: 100px;
height: 100px;
background-color: #ff0;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%)
}
原理与方法2相同，只是margin换成了translate平移属性。
4.利用表格属性实现水平垂直居中
实现原理;父元素转化为表格，然后给子元素套上一个盒子，將这个盒子转化为单元格，最后实现效果。（我们可以知道在表格属性中，一般单元格内内容都是垂直居中的，我们正是利用这一原理实现效果）
html代码如下：
css代码如下：
.d{
width: 300px;
height: 200px;
background-color: #ff0;
float: left;
margin: 20px;
/* 父元素转化为表格 */
display: table;
}
.box{
/* 转化为单元格td */
display: table-cell;
vertical-align: middle;
}
.d1{
width: 100px;
height: 100px;
background-color: #ff0;
margin: auto;
}
此方法的缺点就是需要多套一个盒子，不能保证结构的简洁性。
5.利用vertical-align属性实现水平垂直居中
实现原理：利用vertical-align属性实现垂直居中效果，再实现水平居中。
html代码如下：
css代码如下：
.e{
width: 300px;
height: 200px;
background-color: #ff0;
float: left;
margin: 20px;
/* 缺点：行高必须固定 */
line-height: 200px;
font-size: 0;
text-align: center;
}
.e1{
width: 100px;
height: 100px;
background-color: #ff0;
display: inline-block;
vertical-align: middle;
}
此方法的缺点的父元素的行高必须确定，不然难以实现。同时注意vertical-align必须与display: inline-block;同时使用，不然不会生效。
6.利用vertical-align属性实现水平垂直居中（2）
实现原理：对上一种方法的优化，添加一个辅助盒子占父元素的全部高（宽度为0）并隐藏，解决父元素行高必须确定的问题。
html代码如下：
css代码如下：
.f{
width: 300px;
height: 200px;
background-color: #ff0;
float: left;
margin: 20px;
text-align: center;
}
.f0{
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
}
.f1{
width: 100px;
height: 100px;
background-color: #ff0;
display: inline-block;
vertical-align: middle;
}
7.弹性盒实现水平垂直居中
实现原理：定义父元素为弹性盒子，然后对子元素进行水平垂直居中处理
html代码如下：
css代码如下：
.g{
width: 300px;
height: 200px;
background-color: background-color: #ff0;
float: left;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.g1{
width: 100px;
height: 100px;
background-color: #ff0;
}
若不考虑兼容问题，此方法是最简单的水平垂直居中方法，三行代码实现效果。
8.网格布局grid布局实现水平垂直居中（gird网格布局还未发展完善，兼容性差。）
实现原理：核心原理与弹性盒实现原理相同，但是兼容性比Flex弹性盒布局差，目前尽量少用。
html代码如下：
css代码如下：
.h{
width: 300px;
height: 200px;
background-color: background-color: #ff0;
float: left;
margin: 20px;
display: grid;
/* 垂直居中两种属性都可实现 */
/* align-items: center; */
align-content: center;
justify-content: center;
}
.h1{
width: 100px;
height: 100px;
background-color: #ff0;
}