水平居中方法:
1.inline,inline-block元素的水平居中,在父级块级元素中设置text-align:center;
![clipboard.png clipboard.png](https://image-static.segmentfault.com/307/018/3070189691-5c054f2b18f05_articlex)
![clipboard.png clipboard.png](https://image-static.segmentfault.com/307/018/3070189691-5c054f2b18f05_articlex)
2.确定宽度的块级元素水平居中方法
margin:0 auto;
![clipboard.png clipboard.png](https://image-static.segmentfault.com/303/918/3039184570-5c054f1c5fd1b_articlex)
![clipboard.png clipboard.png](https://image-static.segmentfault.com/303/918/3039184570-5c054f1c5fd1b_articlex)
绝对定位和margin-left:-(width/2)实现水平居中:
![clipboard.png clipboard.png](https://image-static.segmentfault.com/374/835/3748356593-5c054f1836dc7_articlex)
绝对定位+margin:0 auto + left:0 right:0 bottom:0 top:0
![clipboard.png clipboard.png](https://image-static.segmentfault.com/127/631/1276310432-5c054f1264b95_articlex)
3.位置宽度的块级元素居中方法:
display:inline-block 设置text-align:center;
![clipboard.png clipboard.png](https://image-static.segmentfault.com/254/007/2540078645-5c054f049528a_articlex)
![clipboard.png clipboard.png](https://image-static.segmentfault.com/254/007/2540078645-5c054f049528a_articlex)
flex布局实现居中
![clipboard.png clipboard.png](https://image-static.segmentfault.com/951/244/951244308-5c054efa9d1d3_articlex)
垂直居中实现方法:
1.固定高度实现垂直居中
height+line-height
![clipboard.png clipboard.png](https://image-static.segmentfault.com/185/057/1850572343-5c054ef325d19_articlex)
绝对定位+margin-top赋值
![clipboard.png clipboard.png](https://image-static.segmentfault.com/390/950/3909506900-5c054eebba2ad_articlex)
2.高度自适应实现垂直居中:
flex布局:
![clipboard.png clipboard.png](https://image-static.segmentfault.com/947/975/94797559-5c054ee487cef_articlex)
![clipboard.png clipboard.png](https://image-static.segmentfault.com/250/506/2505061205-5c054ee08290b_articlex)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)