通过之前总结水平居中与垂直居中的基本方法，梳理垂直水平同时居中的方法就没有那么乱了。
- text-align：center + line-height
如下图，div2中用text-align+line-height实现单行文本水平垂直居中。
也可以将div2设置为inline-block实现div垂直水平居中。
- text-align：center + vertical-align：middle
如果想让div2在div1中居中，那么需要将父元素设置text-align：center，因为居中效果只对文本内容和行内元素有效，那我们将子元素div2设置为inline-block元素，还要将父元素设置为设置为table-cell元素，vertical-align：middle，
- margin：0 auto+vertical-align：middle
margin: 0 auto；在本身元素上设置，可以实现块级元素水平居中，所以将子元素设置为margin：0 auto；再还要将父元素设置为设置为table-cell元素，vertical-align：middle即可
- 绝对定位实现垂直水平居中
绝对定位元素垂直水平居中：因为绝对定位元素具有伸缩性，所以如果我们将绝对定位元素的width设置为auto时，同时把left与right设置为0，那么元素就会将其相对的父元素水平填充满。这时如果我们把宽度设置为固定值，margin为auto的前提下，只要 left 和 right 的值相等（或都为0），且不超过其相对元素减去该绝对定位元素 width 的一半，就可以实现水平居中了。垂直居中也是如此，只要top与bottom的值也相等或者都为0就可以，这样我们的绝对定位元素就做到了垂直水平居中了。
—-想了解更多的css相关样式处理怎么解决关注<计算机技术网(www.ctvol.com)!!>
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/csstutorial/109375.html