水平垂直居中布局的总结
-
关于水平垂直居中布局
简单说就是将之前水平、垂直居中的整合
解决方案
- table + margin 实现水平居中，table-cell + vertical-algin 实现垂直居中
- absolute + transform 实现水平、垂直居中
第一种
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>水平垂直居中的方案</title> <style> * { padding: 0; margin: 0; } .parent { width: 600px; height: 600px; background: #999; display: table-cell; vertical-align: middle; } .child { width: 200px; height: 200px; background: red; display: block; margin: 0 auto; } </style> </head> <body> <!-- 父级容器 --> <div class="parent"> <!-- 子级元素 --> <div class="child"> </div> </div> </body> </html>- 这里为了语义化，将child的display设置为block
第二种
沿用上方的代码，只改动css
* { padding: 0; margin: 0; } .parent { width: 600px; height: 600px; background: #999; position: relative; } .child { width: 200px; height: 200px; background: red; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }- 此种方法如果要兼容老版本游览器请注意transform属性
