谈谈CSS实现水平垂直居中布局的办法
比来面试的时候，面试官问到了CSS水平垂直居中规划的方式，关于刚入前端没多久的我，无疑是一脸懵逼，闲了抓紧查阅材料剖析一波，给各位分享一下，幸免落坑。
第一先说明一下html和一些根基css样式，下面就不再赘述！
html
<body> <div class="div1"> <div class="box size">垂直水平居中</div> </div> </body>
公共css代码如下
<style type="text/css">
/* 公共样式 */
.div1{
width: 300px;
height: 300px;
border:1px solid aqua;
}
.box{
background: #00FFFF;
}
.box.size{
width:100px;
height:100px;
}
</style>这些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修改为：
<body> <div class="div1"> <div class="box">水平垂直居中，不需要子元素牢固宽高</div> </div> </body>
公共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-table
css新增的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实现水平垂直居中规划的办法的具体内容，更多请关注百分百源码网其它相关文章！
