CSS关于div、图片居中问题

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>

 

你可能感兴趣的:(css)