温州翁山乡谈谈CSS实现水平垂直居中布局的方法

最近面试的时候，面试官问到了CSS水平垂直居中布局的方式，对于刚入前端没多久的我，无疑是一脸懵逼，闲了赶紧查阅资料分析一波，给各位分享一下，避免落坑。
首先先说明一下html和一些基础css样式，下面就不再赘述！html

公共css代码如下这些css样式在后续介绍中默认带上，不再赘述！一、 absolute 和 margin auto（常用）同样居中元素的宽高必须固定，并且需要得知子元素的宽高这种方式通过设置各个方向的距离都是0，此时再将margin设为auto，就可以在各个方向上居中了.div1{
position: relative;
}
.box{
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
二、absolute 和margin（负值）简单说一下原理，利用了绝对定位，绝对定位的百分比是相对于父元素的宽高，所以我们可以根据这个原理将元素居中显示。
但是要注意：
绝对定位是基于子元素的左上角来说的，但是要想让子元素居中显示，就要解决这个问题。
此时可以利用margin的负值来实现效果，当外边距为负值时，元素向相反方向定位，这样我们将子元素的外边距设置为子元素的宽高的一半就可以实现了。
（PS：
缺点就是必须得到子元素的宽高）.div1{
position: relative;
}
.box{
top: 50%;
left: 50%;
position: absolute;
margin-top: -50px;
margin-left: -50px;
}
三、absolute 和 calc同样需要子元素的宽高固定，并知道宽高，css3具有计算属性。
top的百分比是基于元素左上角减去宽度的一半即可（PS：
依赖calc的兼容性）.div1{
position: relative;
}
.box{
position: absolute;
top: calc(50% - 50px );
/* 减号前后没有空格，该样式不生效*/ left: calc(50% - 50px );
}
当我在写这段代码的时候，发现一个有趣的事情，calc（50%-50px）如果减号前后没有空格的话，样式就不会生效，写上空格的话，就会正常生效了，具体原因我也不太清楚emmmmm下面的方法将不需要知晓子元素的宽高即可设置html修改为：
公共css如下 .div1{
width: 300px;
height: 300px;
border: 1px solid red;
}
.box{
background: #00FFFF;
}
四、flex（常用）flex是现代的布局方案仅仅需要几行代码即可实现居中效果.div1{
display: flex;
justify-content: center;
align-items: center;
}
五、line-height利用行内元素居中属性也可以做到水平垂直居中。
把box设置为行内元素，通过text-align就可以实现水平居中vertical-align 也可以在垂直方向做到居中（PS：
这种方法需要在子元素中将文字显示重置为想要的效果） .div1{
line-height: 300px;
text-align: center;
font-size: 0px;
}
.box{
font-size: 10px;
display: inline-block;
vertical-align: middle;
line-height:initial;
/* 修正文字 */ text-align: left;
}
六、absolute 和 transform不需要子元素宽高固定，但是依赖于translate2d的兼容性 .div1{
position: relative;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
七、css-tablecss新增的table属性，可以把普通元素改变为table元素的显示效果，也可以实现水平居中 .div1{
display:table-cell;
text-align: center;
vertical-align: middle;
}
.box{
display:inline-block;
}
以上就是我总结的一些居中布局的方法了，还有什么其他的欢迎补充！个人感觉：
我比较喜欢 absolute +margin auto 、flex、absolute 和 transform，移动端最好用flex吧，pc端我喜欢absolute +margin auto相关教程推荐：
CSS视频教程 、CSS3视频教程以上就是谈谈CSS实现水平垂直居中布局的方法的详细内容，更多请关注php中文网其它相关文章！
微信
分享相关标签：
css 水平垂直居中本文原创发布php中文网，转载请注明出处，感谢您的尊重！
上一篇：
2020年CSS面试题汇总（最新）
下一篇：
在html元素中设置css样式的方式是什么相关文章相关视频2019 CSS经典面试题HTML+CSS部分前端基础面试题web前端面试中10个关于css高频面试题2020年CSS面试题汇总（最新）谈谈CSS实现水平垂直居中布局的方法使用CSS3边框图像(border-image)属性（上）使用CSS3用户界面及透明和旋转属性使用CSS3动画属性 [做网站css教程]