让一个元素垂直水平居中的四种方法

第一种方法:

div.box{

weight:200px;

height:400px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置，距离上、左都为50%-->

left:50%;

top:50%;

<!--设置元素的左外边距、上外边距为宽高的负1/2-->

margin-left:-100px;

margin-top:-200px;

}

*兼容性好;缺点:必须知道元素的宽高

-------------

第二种方法：

div.box{

weight:200px;

height:400px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置，距离上、左都为50%-->

left:50%;

top:50%;

<!--设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)-->

transform:translate(-50%,-50%);

}

*这是css3里的样式;缺点:兼容性不好，只支持IE9+的浏览器

---------------

第三种方法

div.box{

weight:200px;

height:400px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置，距离上、下、左、右都为0-->

left:0;

right:0;

top:0;

bottom:0;

<!--设置元素的margin样式值为 auto-->

margin:auto;

}

*兼容性较好，缺点:不支持IE7以下的浏览器

第四种方法

 一个块状元素A内 有若干个块状元素B，要达到的效果是 ，所有块状元素B 在 元素A 内水平居中显示。

<div class="A">

　　<div class="B"></div>

　　<div class="B"></div>

　　<div class="B"></div>

</div>

.A｛

　　width:500px;

　　backgrond-color:green;

       text-align:center

｝

.B｛

　　width:100px;

　　height:100px;

　　magin:5PX;

　　backgrond-color:green;

       display:inline-block；

｝