css元素水平垂直居中的三种方式简单探索
提示：文章仅是对css水平居中方式的简单解释，以方便记忆，相关代码已经有很多了，但是基本上是直接给出代码，而每次自己想要使用时也会老是遗忘，或者因为原理不清楚，而导致误用或者使用混乱，因此探索一下原理，以方便使用和记忆
在文章的开头，给出官方的链接，大家可以自行学习查阅
基础思路
我们知道垂直居中就是元素的上下距离相等，左右距离相等，那么，最简单的方式自然就是直接设置上下左右的距离，所以我们设置一个父元素，高度300px，宽度为200px，子元素宽度100px，高度100px，为了区别，为父元素和子元素设置了背景颜色。那么此时我们就需要设置子元素的上下边距为（300-100）/2=100px，左右边距50px；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.center {
background-color: antiquewhite;
height: 300px;
width: 200px;
overflow: hidden;
}
.item {
background-color: aliceblue;
width: 100px;
height: 100px;
/* 这里为了方便理解没有使用简便写法 */
margin-top: 100px;
margin-bottom: 100px;
margin-right: 50px;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="center">
<div class="item"></div>
</div>
</body>
</html>
由此可以获得效果图：
这里只关注子元素相对于父元素的水平是垂直居中，对于父元素没有做出限制
以上就是对于元素水平垂直居中的基础了（后面的方法原理上就是依照这个的）
方法一：自动设置外边距
我们知道，在实际开发过程时，子元素的宽高实际上很多时候是不固定的，所以，我们希望这个边距是可以自动调节的，而不是手动的输入，我们也知道左右的外边距相等我们可以设置margin-right: auto;margin-left: auto;此时子元素的左右外边距会自动设置为相等的值，但是如果我们设置margin-top: auto;margin-bottom: auto;我们会发现并不会垂直居中，也就是并不会自动设置上下外边距相等，但是这个思路是可以实现的，它需要使用定位方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.center {
background-color: antiquewhite;
height: 300px;
width: 200px;
position: relative;
}
.item {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: aliceblue;
width: 100px;
height: 100px;
/* 这里为了方便理解没有使用简便写法 */
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div class="center">
<div class="item"></div>
</div>
</body>
</html>
（效果图是一样的，我就不放了）
设置“子绝父相”定位，同时子元素相对距离上下左右的距离都是0，再设置上下左右外边距为auto，即可实现水平垂直居中效果
关于“子绝父相”，看这个就够了：
方法二：百分比单位加css3转换属性
我们知道单位不只可以使用px，也可以使用百分比，那么我们设置距离上边和左边的距离是50%，为了看的更明显一些，父元素的宽度改大了一些。
首先我们先不使用“子绝父相”：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.center {
background-color: antiquewhite;
height: 400px;
width: 600px;
overflow: hidden;
}
.item {
margin-top: 50%;
margin-left: 50%;
background-color: aliceblue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="center">
<div class="item"></div>
</div>
</body>
</html>
此时效果图：
通过调节父元素的宽度我们可以发现，这里margin-top对应的百分比是父元素宽度的百分比，是不满足我们要求的（此处虽然可以选择使用乘以高宽比，但是css不支持简单运算，如果要实现计算的话那就要用其他的办法，如js，使用扩展等），但是我们发现使用定位方式后的top对应的百分比就是我们需要的高度的百分比。
此时代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.center {
background-color: antiquewhite;
height: 400px;
width: 600px;
position: relative;
}
.item {
position: absolute;
top: 50%;
left: 50%;
background-color: aliceblue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="center">
<div class="item"></div>
</div>
</body>
</html>
效果图为：
这里我们细看可以发现，子元素的左上角的那个点确实是居中了，当我们要的是子元素的中心点居中，这里的话可以需要做一个偏移，将中心点置于中心位置，此时的话使用外边距的方式的不够明智的，我们在这里的话需要使用css3的一个属性translate，设置translate(-50%, -50%);让子元素偏上一半高度，偏左一半宽度，达到居中效果，整体思路的话就是让元素的左上角的点成为中心点，再将中心点偏移。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.center {
background-color: antiquewhite;
height: 400px;
width: 600px;
position: relative;
}
.item {
background-color: aliceblue;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="center">
<div class="item"></div>
</div>
</body>
</html>
效果图：
方法三：使用 Flexbox
这个方法就没有什么方法性可言了，因为这里直接有一个垂直居中属性，需要注意的就是这个父元素和父元素下的元素都是Flexbox了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.center {
background-color: antiquewhite;
height: 400px;
width: 600px;
display: flex;
justify-content: center;
align-items: center;
}
.item {
background-color: aliceblue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="center">
<div class="item"></div>
</div>
</body>
</html>
总结反思
学以致用，造轮子以便造车
上面的代码是学习使用的，但是在我们实际的使用中要使用的话，还需要一点点小改动：
方法一：
/* 要居中的父元素 */
.VerHor_center_container {
/* 高度宽度依据实际修改 */
height: 300px;
width: 200px;
position: relative;
}
/* 子元素的类名 */
.VerHor_center_element {
position: absolute;
top: 0;bottom: 0;
right: 0;left: 0;/* 如果只需要垂直居中就删除该行 */
/* 高度宽度依据实际修改 */
width: 100px;
height: 100px;
margin: auto;
/* 以上是水平垂直居中定位 */
}
方法二：
/* 要居中的父元素 */
.VerHor_center_container {
/* 高度宽度依据实际修改 */
height: 300px;
width: 200px;
position: relative;
}
/* 子元素的类名 */
.VerHor_center_element {
position: absolute;
top: 50%;
left: 50%;
/* 只要垂直居中需要删去left: 50%;同时下面两句的更改为
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
*/
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/* 以上是水平垂直居中定位 */
/* 高度宽度依据实际修改 */
width: 100px;
height: 100px;
}
方法三：
/* 要居中的父元素 */
.VerHor_center_container {
/* 高度宽度依据实际修改 */
height: 300px;
width: 200px;
display: flex;
justify-content: center;/* 只要垂直居中删去这个 */
align-items: center;
}
学而思之
- 不知道你有没有疑惑，为何第一次使用固定方式的时候需要一个属性overflow: hidden;
- 为何需要改变定位方式auto在上下边距的时候才可以居中了呢？
- 三种方式对于实际开发而言，都有什么优缺点呢？更习惯用哪个？
这些问题我也没有明确的答案，所以暂时没有写出来，欢迎各位大佬在评论区中为我解答疑惑，在确定答案后我也会进行更新嘞~
感谢观看！！！
扫一扫
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
