面试题经常提问的问题,用简单的语言描述清楚
方法一:利用定位(常用方法)
用的就是子绝父相的方法,给里的最近的一个父元素相对定位,给子元素绝对定位,这样可以很快的定位到水平垂直居中,记得要加上margin-top和margin-left,各自为自身宽高的一半
方法二:利用margin:auto
利用子绝父相和外边距margin实现 先为父盒子设置相对定位,再为子盒子设置绝对定位,且绝对定位的四个方向的位移都设为0,然后将外边距margin属性值设置为auto即可(同样是子绝父相)
方法三:利用display:table-cell
其实就是将子盒子改成行内块的元素,再用text-align居中的方式让盒子水平居中,再用line-hight实现盒子的垂直居中
方法四:display:flex设置水平垂直居中
将布局改成flex布局,再将盒子侧轴和主轴都设定为居中
justify-content:center
align-items:center
方法五:利用transform
先将子盒子绝对定位,父盒子相对定位,再将子盒子移动父盒子的上和左的50%,紧接着用transform移动子盒子的上左各一半
