CSS关于div、图片居中问题

浏览数：20 / 时间：2015年06月09日

1. 子DIV在父DIV居中问题

<style type="text/css">
    #outer{
        height: 500px;
        width: 500px;
        background-color: yellow;
        position: relative;
    }
    #middle{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        margin-top: -100px;
        margin-left: -100px;
        background-color: red;
    }
</style>


<div id="outer">
    <div id="middle">
    </div>
</div>

这段代码的关键问题在于margin-left 和margin-right ，这两个属性的值为子DIV宽和高的一半。

2. 未知宽和高的DIV中图片居中

<style> 
#test {
    display: table-cell;
    *position: relative;
    width: 300px;
    height: 300px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid red
}
#test p {
    *position: absolute;
    *top: 50%;
    *left: 50%;
    margin: 0;
    background: red
}
#test p img {
    *position: relative;
    *top: -50%;
    *left: -50%;
    vertical-align: middle
}
</style>
<div id=‘test‘>
    <p>
        <img src="#">
    </p>
</div>

3. 图片居中

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片水平垂直居中-前端小站</title>
    <style>
      .box {
          width:300px;
          height:300px;
          background:#ccc;
          text-align:center
      }
      span {
          height:100%;
          display:inline-block;
          vertical-align:middle
      }
      img {
          vertical-align:middle
      }

    </style>
    <script src=‘jquery-1.8.0.js‘></script>
</head>
<body>
<div class="box">
    <img src="http://t3.baidu.com/it/u=1481340604,3053366708&fm=21&gp=0.jpg"/><span></span>
</div>
</body>
</html>