div水平垂直居中问题

发布于2017年2月16日 23:49:24 ，最后一次修改于2017年2月18日 16:59:00

来，直接来吧，，

一、如果是文字居中：

<div class="center"><span>hello</span></div>

则css：<style>.center { width:200px; height:100px; text-align:center; line-height:100px}</style>

这就实现了水平垂直居中，如图：

二、如果是div居中：

则想让wrap相当于浏览器居中，center相当于wrap居中，则css可以这么写：

.wrap{width:400px;height:200px;background:yellow;position:absolute;top:50%;left:50%;margin-left:-200px;margin-top:-100px;}
.center { width:200px; height:100px; background:#ff6600; margin:0 auto;position: relative;margin-top:50px;}

还可以通过子元素相对父元素绝对定位来实现：

则css为：

.wrap{width: 300px;height: 200px;border: 2px solid #ccc;box-sizing: border-box;position: relative;}

.center{position: absolute;left:50%;margin-left:-50px;}

.child{width: 100px;height: 100px;background: green; box-sizing: border-box;}

而单独来说垂直居中的话，方法也很多：

比如：<div class="box boxN"><span>垂直居中</span></div>

1，用table-cell，

.box1{ display: table-cell;vertical-align: middle;text-align: center; }

2，用display:flex：

.box2{display: flex;justify-content:center;align-items:Center;}

3，通过绝对定位负边距

.box3{position:relative;}

.box3 span{position: absolute;width:100px;height: 50px;top:50%;left:50%;margin-left:-50px;margin-top:-25px;text-align: center;}

4.用绝对定位和0：

.box4 span{width: 50%; height: 50%; background: #000;overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}

5.用translate属性

.box6 span{position: absolute;top:50%;left:50%;width:100%; transform:translate(-50%,-50%); text-align: center; }

6.display：inline-block，通过after来占位：

.box7{text-align:center;font-size:0;}

.box7 span{vertical-align:middle; display:inline-block;font-size:16px;}

.box7:after{content:'';width:0;height:100%;display:inline-block;vertical-align:middle;}

7.display:flex和margin:auto

.box8{display: flex;text-align: center;}

.box8 span{margin: auto;}

8.display:-webkit-box

.box9{display: -webkit-box;-webkit-box-pack:center;-webkit-box-align:center;-webkit-box-orient: vertical;text-align: center}

不足的是其中有些方法对IE8以下的并不是太好，会出现兼容错差，还有其他方法的欢迎大家来补充补充。