在前端开发项目中，经常用到盒子的水平垂直居中。盒子的水平居中相对容易实现，垂直居中的实现相对复杂一些，在这里主要总结几个在项目中经常使用的方法
一、利用定位（position）的方法实现
利用定位（position）有三种实现方式：
第一种方法，将盒子position设置为absolute，将父级position设置为relative，再将盒top、left、right、bottom都设置为0，最后将margin设置为0（水平和垂直平分剩下的空间），从而实现盒子的水平垂直居中，代码展示如下：
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
position: relative;
}
.container {
width: 200px;
height: 200px;
background-color: #19caad;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<body>
<div class="container"></div>
</body>
效果如下：
code_1.png
第二种方法，只设置盒子的position为relative，将盒子的top设置为50%，再将margin设置为‘0 auto’让盒子在水平方向居中，最后将margin-top设置为盒子高度的一半将盒子向上偏移，从而实现盒子的水平垂直居中，代码展示如下：
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
}
.container {
width: 200px;
height: 200px;
background-color: #8cc7b5;
position: relative; /*不脱离文档流*/
margin: 0 auto; /*水平居中*/
top: 50%;
margin-top: -100px;
}
</style>
<body>
<div class="container"></div>
</body>
效果如下：
code_2.png
上面使用了margin-top将盒子向上偏移，除了margin-top也可以使用CSS3的transform属性，将盒子的transform设置为translateY(-50%)，将盒子向Y轴（向上）平移自身高度的一半，代码展示如下：
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
}
.container {
width: 200px;
height: 200px;
background-color: #8cc7b5;
position: relative; /*不脱离文档流*/
margin: 0 auto; /*水平居中*/
top: 50%;
transform: translateY(-50%);
}
</style>
<body>
<div class="container"></div>
</body>
第三种方法，这种方式大体就是第一种方法与第二种方法的结合，将盒子position设置为absolute，将父级position设置为relative，再将top与left设置为50%，最后将margin-top与margin-left设置为盒子高度与宽度的一半，从而实现盒子的水平垂直居中，代码展示如下：
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
position: relative;
}
.container {
width: 200px;
height: 200px;
background-color: #19caad;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
<body>
<div class="container"></div>
</body>
上面使用的方法也可以使用transform去实现，代码展示如下：
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
position: relative;
}
.container {
width: 200px;
height: 200px;
background-color: #19caad;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
</style>
<body>
<div class="container"></div>
</body>
二、利用弹性布局（flex）实现
想利用好弹性布局（flex），首先得了解与学习弹性布局（flex），想了解与学习的可以去看看阮一峰老师的博客，这里简单的学习两个属性：
1.justify-content属性：定义了项目在主轴上的对齐方式。
可选值：flex-start | flex-end | center | space-between | space-around;
2.align-items属性:定义项目在交叉轴上如何对齐。
可选值：flex-start | flex-end | center | baseline | stretch;
弹性布局（flex）的实现方法，首先将盒子的父元素display设置为flex，然后将justify-content与align-items设置为center，这样就实现了水平垂直居中，当然弹性布局（flex）的用途更多，感兴趣可以去深入学习，代码展示如下：
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
display: flex;
justify-content: center; /*定义body、html中的所有元素水平居中*/
align-items: center; /*定义body、html中的所有元素垂直居中*/
}
.container {
width: 200px;
height: 200px;
background-color: #bee7e9;
}
</style>
<body>
<div class="container"></div>
</body>
效果如下：
code_3.png
以上这些水平垂直居中方式都只是项目中常用的，当然还有更多的方法可以实现，这些在实际项目中没有遇到过，所以暂时就介绍这些啦，当然具体使用哪一种得以当时的条件来选择。更多的欢迎大家一起学习探讨！
网友评论