实现盒子水平和垂直居中的问题和解决方法

牵手不牵薛之谦

已于 2022-07-20 20:10:13 修改

阅读量837

点赞数

文章标签： html5 css3

于 2022-07-16 22:45:56 首次发布

本文链接：https://blog.csdn.net/qq_53172414/article/details/125826048

版权

本文介绍了多种在HTML5和CSS3中实现盒子垂直和水平居中的方法，包括使用margin、定位与transform: translate、弹性盒子等，并详细阐述了每种方法的注意事项和潜在问题。重点讨论了margin的塌陷解决和transform: translate的使用细节。

摘要由CSDN通过智能技术生成

首先给予父盒子和子盒子一个合适的宽高并且给予辅助色放便查看,直接给予margin发现父盒子会塌陷实现不了垂直居中,也可以给予父盒子一个边框来解决
给予子盒子一个上下左右的margin: auto;并且给父盒子overflow: hidden会发现子盒子只有水平居中,没有垂直居中是因为块级元素独占一行且高度不会自动填充的上下也没有多余的空间所以默认值为0,W3C规定，top，bottom设置为auto，其实默认值为0,只有绝对定位的元素top,bottom为auto的自动分配从而实现上下左右都自动分配
解决方法:

(1)是给需要垂直和水平居中的元素添加绝对定位(脱离标准流)父元素添加相对定位,并且每个方向边距设置为0,再添加margin: auto;就可以实现垂直水平居中了
(2)不在垂直方向设置auto,根据需要移动的距离来赋值,(父盒子高或宽-子盒子高或宽)/2,但是需要解决盒子塌陷问题一般有四种常用的方法:浮动,双伪元素,单伪元素和overflow: hidden;我这里使用的是直接给父元素添加overflow: hidden;