一.使用margin实现盒子的垂直和水平居中和使用事项
- 首先给予父盒子和子盒子一个合适的宽高并且给予辅助色放便查看,直接给予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;
二.使用定位和transform: translate实现盒子的垂直水平居中 (推荐)
- 给予父元素相对定位,给予子元素绝对定位,子元素设置left/top:50%或父盒子的一半来移动,距离为父盒子的一半,再使用