position:absolute;时如何居中

分类:CSS |

我们习惯用margin:0,auto;居中元素,但有时我们必须要让元素获得position:absolute;,这时候,再用margin:0,auto;居中是无效的。


  1. 举个例子

    <!DOCTYPE html>

    <html>

     <head>

      <title>wheel</title>

      <style type="text/css" >

       #sample{

        width: 900px;

        height: 600px;

        position: absolute;

        margin: 0,auto;

        background: #A5A5A5;


       }

      </style>

     </head>

     <body id="body">

      <div id="sample">

      </div>

     </body>

    </html>

    在这里,虽然css有margin: 0,auto;,显示效果如下图所示,没有居中


  2. 2

    我们需要把代码改为

    <!DOCTYPE html>

    <html>

     <head>

      <title>wheel</title>

      <style type="text/css" >

       #sample{

        width: 900px;

        height: 600px;

        position: absolute;

        left: 50%;

        margin-left: -450px;

        background: #A5A5A5;


       }

      </style>

     </head>

     <body id="body">

      <div id="sample">

      </div>

     </body>

    </html>

    在这里我们做了两个改动,就是加了

        left: 50%;

        margin-left: -450px;

    为什么这么改呢,left是在position属性是absolute或fixed时才有效的, left: 50%;意思距离左边是界面的百分之五十,这是div的左边边界正好在画面的中间线,这是我们再左移图片的一半长度的距离,就可移使图片中间与画面中间重叠

    而且在缩放时,仍保持居中。


方法一:(不能微调)

position:absolute;

left:0; right:0; top:0; bottom:0;

margin:auto;

 

方法二:(可微调)

position:absolute;

top:50%; left:50%;

margin-top:-100px;(元素高度的一半)

margin-left:-100px;(元素宽度的一半)


以上转自网络