一个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%);
}
上一篇:Can you find it?(hdu 2141 二分查找)


下一篇:从士兵到程序员再到SOHO程序员 (二)