css实现一个元素的水平垂直居中与页面中，是搭建页面及样式经常遇到的问题，下面呢，kk把在项目的实践中经常用到的几种方法总结了一下，和大家一起分享~~~（欢迎大家批评指正哦）
先来个效果图
方法一：（直接上代码）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js基础测试</title> <style> body{ margin:0; padding:0; } .parent{ width:80%; margin:0 10%; border:5px solid; text-align:center;/*使子元素的内容居中显示*/ } .son{ width:200px; height:200px; border:2px solid red; margin: 0 auto;/*使此元素水平居中*/ } </style> </head> <body> <div class="parent"> <div class="son">我是子元素</div> </div> <script> </script> </body> </html>
注：重点，son的左右margin值为auto，其他的样式按照需求调试即可。
方法二：（直接代码）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js基础测试</title> <style> body{ margin:0; padding:0; } .main{ width: 200px; height: 200px; border: 3px solid red; position: absolute; left: 0; right: 0; margin: 0 auto; } </style> </head> <body> <div class="main"> </div> <script> </script> </body> </html>利用定位结合margin实现