web前端学习分享-对实现元素居中的三种方法的分析
对于一个已知宽高的元素来说，通过定位的方式，借助于元素宽高可以很容易的实现居中效果。本文要讨论的是在不借助元素宽高的情况下如何实现水平垂直居中。主要介绍三种方式：第一种方式是使用position+margin的方式实现，第二种是使用position+transform的方式实现，第三种是使用flex布局实现。接下来一一分析其实现原理。
<div class="box">
<div class="box1"></div>
</div>样式设置
.container{width: 300px; height: 300px;background-color: silver;}
.box{width: 100px;height: 100px;background-color: orange;}/*此处div.box的width和height是任意指定的*/初始状态：
实现方式一：position+margin
首先内部的div.box需要能够移动起来，也就是需要相对于div.container进行绝对定位
第一步：实现水平居中
在开启定位之后，水平方向的布局需要满足等式：div的左右margin + 左右border + 左右padding + width + left + right = 包含块的内容区宽度
此时如果设置div.box的左右偏移量为0，左右margin为auto，就可以实现水平居中
第二步：实现垂直居中
垂直方向也需要满足等式 div的上下margin + 上下border + 上下padding + height + top + bottom = 包含块的内容区高度
此时如果设置div.box的上下偏移量为0，上下margin为auto，就可以实现垂直居中 
整合一下上面的代码，也就是通过position+margin实现不知宽高的元素居中的方法了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过position+margin的方式实现不知宽高的元素的居中</title>
<style>
.container{
width: 300px;
height: 300px;
background-color: silver;
position: relative;
}
.box{
width:100px; /*任意设置*/
height:100px; /*任意设置*/
background-color: orange;
position: absolute;
left:0;
right:0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>注意：采用position+margin的方式实现居中虽然不要求知道元素的宽高大小，但是尺寸是要求固定的，如果尺寸是靠内容撑开的，width和height会被调整至最大。因为在margin，width、height都为auto的情况下，会优先调整width和height去分别满足垂直方向和水平方向的等式！
实现方式二：position+transform
transform属性能够在不影响页面布局的情况下对元素进行移动。参数可以是具体的像素值也可以是百分比，但这里的百分比是相对于自身的尺寸进行计算的。
还是需要设置div.box1相对于box.container进行绝对定位
第一步：设置left:50%;top:50%;
第二步：相对于自身左移一半，上移一半
经过以上两步就可以实现元素的居中，且在元素大小不确定，由内容撑开的情况下依然适用
实现方式三：flex布局
flex布局第一步是先设置div.container为弹性盒子，如下，在弹性布局中，项目div.box高度默认会被自动拉伸，填充为父元素的高度。宽度默认是内容撑开的
第一步：实现水平居中，设置弹性盒子的justify-content属性为center
弹性盒子的justify-content属性用来设置主轴上的元素如何排列，当取值为center，表示元素居中排列
第二步：在水平居中的基础上垂直居中，设置弹性盒子的align-items属性为center
弹性盒子的align-items属性用来设置元素在辅轴方向上如何排列，默认值是stretch，默认会拉伸为父元素的内容高度，当取值为center时，会沿辅助居中对齐，高度默认由内容填充。
如上，使用flex布局，经过以上两步就可以实现一个元素的垂直居中显示，是使元素居中显示最简单的一种方式！
总结
如上就是实现元素居中的三种经典方式，但是分别具有优缺点：
第一种方式兼容性好，但在元素宽高自适应的情况下不适用；第二种和第三种对元素的宽高没有限制，即使自适应也可以完美实现居中，但是要注意兼容性问题，版本低的ie浏览器不支持！可根据适用情况灵活选择！
- 点赞
- 收藏
- 关注作者
评论（0）