水平居中
child是block元素:
- child宽度不确定
child左右margin相同即可 - child宽度确定
margin-left: auto;
margin-right: auto;
child是inline元素:父元素设置text-align: center;
垂直居中
- parent高度不确定由child撑起:
不管child高度确不确定,只要parent的padding-top和padding-bottom相同即可 - parent高度确定(避免出现这种情况,这种情况只有代码写得很烂才会出现):
flex实现垂直居中(chrome和手机端)、table或div模拟table实现垂直居中(IE浏览器)。
实现垂直居中的七种方法