前段时间面试的时候，面试题中考察最多的CSS就是div居中对齐的问题，所以特地简单总结了一下div居中对齐的方法。这篇文章的目的是希望大家以后根据不同的情况使用不同的CSS。居中方式，闲话少说，直接上代码宽度：500px；高度：500px；-webkit-box-pack：中心；-ms-flex-pack：中心；-webkit-box-align：居中；-ms-flex-align:居中；证明内容：居中；对齐项目：居中；背景色：#000;}.wrapper.inner{宽度：300px;高度：300px；background-color:#666;}父元素的显示设置为flex，使用flexbox布局。这种布局下的元素可以拉伸元素的特性，然后通过justify-content在元素的主轴上设置对齐中心，实现水平对齐，然后使用align-items将对齐中心设置在边上axis实现垂直对齐流体特性.wrapper{position:relative;宽度：500px；高度：500px；背景色：#000；}.wrapper.inner{位置：绝对；顶部：0；右：0；底部：0；左：0；保证金：自动；宽度：300px；高度：300px；background-color:#666;}当一个绝对定位的元素，它的相反方向属性同时有值时，它的流向身体特征被触发。当margin两边的值为auto时，剩余空间的大小会平分。因此，当四个方向均为auto时，即可实现水平和垂直居中变换平移。包装器{位置：相对；宽度：500px；高度：500px；背景色：#000；}.wrapper.inner{位置：绝对；顶部：50%；左：50%；-webkit-transform:翻译(-50%,-50%);转换：翻译（-50%，-50%）；宽度：300px；高度：300px；background-color:#666;}已知宽度和高度的绝对定位。包装器{位置：相对；宽度：500px；高度：500px；背景色：#000；}.wrapper.inner{位置：绝对；保证金顶部：50%；左边距：50%；顶部：-150px；左：-150px；宽度：300px；高度：300px；background-color:#666;}以上内容为个人总结。如有错误或不严谨的地方，欢迎批评指正。喜欢的话请点赞收藏
