div水平居中及div水平垂直居中的方法总结

水平居中

1、margin：auto

<div class="wrap"> <div class="wrap-txt"></div> </div> .wrap{ width: 100%; } .wrap-txt{ width: 6rem; height: 2rem; background: #00FFFF; margin: auto; }

2、text-align：center 3、absolute+margin偏移

<div class="wrap"> <div class="wrap-txt"></div> </div> .wrap{ width: 100%; } .wrap-txt{ width: 6rem; height: 2rem; background: #00FFFF; position: absolute; left: 50%; margin-left: -3rem; }

4、display：box

<div class="box-pack">文字</div> .box-pack{ width: 60px; height: 30px; display: -webkit-box; -webkit-box-pack: center; background: #0894ec; }

5、absolute+transform

垂直居中

1、line-height

<div class="wrap-txt">文字</div> .wrap-txt{ width: 6rem; height: 2rem; line-height: 2rem; border: 1px solid transparent; box-sizing: border-box; background: #00FFFF; }

2、absolute+margin偏移

<div class="wrap"> <div class="wrap-txt"></div> </div> .wrap{ width: 100%; } .wrap-txt{ width: 6rem; height: 2rem; background: #00FFFF; position: absolute; top: 50%; margin-top: -3rem; }

3、absolute+transform

<div class="parent"> <div class="child">文字</div> </div> .parent{ position: relative; width: 5rem; height: 3rem; background: #ccc; } .child{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

4、table-cell

<div class="table-cell"> <div class="table-cell-txt">文字</div> </div> .table-cell{ width: 60px; height: 30px; display: table-cell; vertical-align: middle; background: #ccc; }

5、绝对定位+四个方向为零+margin：auto（必须设置子元素的宽高，否则子元素的宽高等于父元素的宽高）

<div class="absolute-zero"> <div class="absolute-zero-txt">文字</div> </div> .absolute-zero{ width: 60px; height: 30px; background: #f54656; position: relative; } .absolute-zero-txt{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 50px; height: 20px; background: #00FFFF; margin: auto; }

6、css3的flex（存在兼容问题） 7、display：box

<div class="box-align">文字</div> .box-pack{ width: 60px; height: 30px; display: -webkit-box; -webkit-box-align: center; background: #0894ec; }