最近面试的时候，面试官问到了CSS水平垂直居中布局的方式，对于刚入前端没多久的我，无疑是一脸懵逼，闲了赶紧查阅资料分析一波，给各位分享一下，避免落坑。
首先先说明一下html和一些基础css样式，下面就不再赘述！
html
<body><divclass="div1"><divclass="boxsize">垂直水平居中</div></div></body>
公共css代码如下
<styletype="text/css">/*公共样式*/.div1{width:300px;height:300px;border:1pxsolidaqua;}.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><divclass="div1"><divclass="box">水平垂直居中，不需要子元素固定宽高</div></div></body>
公共css如下
.div1{width:300px;height:300px;border:1pxsolidred;}.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
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/42840.html；
