一个div在另一个div中水平垂直的方法

html

 
<div id="main">
　　<div id="box">
　　　　一个div在另一个div中垂直居中实现方法
　　</div>
</div>    
 

一、宽高都定的div在另一个div中水平垂直居中实现方法

css样式：

方法一：

#main{
　　width: 300px;
　　height: 300px;
　　position: relative;
　　background: yellow;
}
#box{
　　position: absolute;
　　width: 100px;
　　height: 140px;
   left: 50%;
   top: 50%;
   margin-left: -50px;/*width的一半*/
   margin-top: -70px;/*height的一半*/
   background: red;
}

方法二：

#main{
　　width: 300px;
　　height: 300px;
　　position: relative;
　　background: yellow;
}
#box{
　　position: absolute;
　　margin: auto;
　　width: 100px;
　　height: 140px;
　　left:0;
　　right: 0;
　　top: 0;
　　bottom: 0;
　　background: red;
}

二、不定宽高的div在另一个div中水平垂直居中实现方法

css样式：

#main{
　　position: relative;/*在父元素中使用相对定位*/
　　width: 500px;
　　height: 200px;
　　overflow: hidden;
　　background-color: #ff0;
　　padding: 10px;
}
#box{
　　position: absolute;   /*在子元素中使用绝对定位*/
　　top:50%;                /*距离相对于父元素的50%的高*/		
　　left:50%;
　　background-color: #eee;
　　-webkit-transform:translate(-50%,-50%);    /*CSS3的样式，:translate(-50%,-50%)相对于自己距离x轴和y轴的-50%*/
　　transform:translate(-50%,-50%);
}