方法一：margin方法
利用margin-left和margin-top；公式 （大 - 小） / 2 = 异动距离。
前提：父元素有边框，不然会出现将父元素也推着跑了
<!DOCTYPE html> <html> <head> <title>center is div</title> </head> <style type="text/css"> .box{ height: 200px; width: 200px; background: green; border: 1px solid #fff; } .son_box{ height: 110px; width: 110px; background:skyblue; /*margin 方法 (200 - 110) / 2 = 45 */ margin-left: 45px; margin-top: 45px; } </style> <body> <div class="box"> <p class="son_box">zeng092210</p> </div> </body> </html>如果没有border时的效果
方法二、 position属性
利用position进行向右和向下移动父元素的50%，在用margin进行向上和向左移动子元素自身宽高的50%
<!DOCTYPE html> <html> <head> <title>center is div</title> </head> <style type="text/css"> .box{ height: 200px; width: 200px; background: green; border: 1px solid #fff; position: relative; } .son_box{ height: 110px; width: 110px; background:skyblue; position: absolute; top: 50%; left: 50%; margin-left: -55px; margin-top: -55px; } </style> <body> <div class="box"> <p class="son_box">zeng092210</p> </div> </body> </html>方法三、position属性都为0
利用position:absolute; left:0; top:0; right:0; bottom:0;配合margin：auto;进行元素居中
<!DOCTYPE html> <html> <head> <title>center is div</title> </head> <style type="text/css"> .box{ height: 200px; width: 200px; background: green; border: 1px solid #fff; position: relative; } .son_box{ height: 110px; width: 110px; background:skyblue; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } </style> <body> <div class="box"> <p class="son_box">zeng092210</p> </div> </body> </html>方法四、css3的新增属性display: table-cell;vertical-align: middle;
利用css3的新增属性display: table-cell;vertical-align: middle;配合子元素的margin:auto
<!DOCTYPE html> <html> <head> <title>center is div</title> </head> <style type="text/css"> .box{ height: 200px; width: 200px; background: green; border: 1px solid #fff; display: table-cell; //属性指让标签元素以表格单元格的形式呈现，类似于td标签。 vertical-align: middle; //属性设置元素的垂直对齐方式。 } .son_box{ height: 110px; width: 110px; background:skyblue; margin: auto; } </style> <body> <div class="box"> <p class="son_box">zeng092210</p> </div> </body> </html>方法五、父元素上使用flexbox的布局 （常用）
利用盒子弹性布局：display: flex; justify-content: center; align-items: center;
<!DOCTYPE html> <html> <head> <title>center is div</title> </head> <style type="text/css"> .box{ /* 父元素宽高知与不知都可 */ /*height: 200px;*/ width: 200px; background: green; border: 1px solid #fff; display: flex; justify-content: center; align-items: center; } .son_box{ /* 子元素宽高知与不知都可 */ /*height: 110px;*/ /*width: 110px;*/ background:skyblue; } </style> <body> <div class="box"> <p class="son_box">zeng092210</p> </div> </body> </html>方法六、利用transform的属性,注意的是子绝父相定位
需要支持H5，因为用到h5的特性
需要注意的是，如果子元素用的是p标签之类的，需要先将自身的携带的padding和margin为0
<!DOCTYPE html> <html> <head> <title>center is div</title> </head> <style type="text/css"> .box{ height: 200px; width: 200px; background: green; border: 1px solid #fff; position: relative; } .son_box{ height: 110px; width: 110px; background:skyblue; position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); } </style> <body> <div class="box"> <div class="son_box">zeng092210</div> </div> </body> </html>
参考博文：https://blog.csdn.net/sinat_17775997/article/details/77547481
