使用CSS居中浮动元素的方法

方法一

设置容器的浮动方式为绝对定位
然后确定容器的宽高 比如宽500 高 300 的层
然后设置层的外边距

CSS Code复制内容到剪贴板  div{            width:500px;            height:300px;            margin:-150px 0 0 -250px;            position:absolute;            left:50%;            top:50%;            background-color:#000;    }  

方法二

父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%,或者子元素相对左移动-50%也就可以了。

CSS Code复制内容到剪贴板 <!DOCTYPE html><html><head>        <title>Demo</title>        <meta charset="utf-8"/>        <style type="text/css">            .p{                position:relative;                left:50%;                float:left;            }            .c{                position:relative;                float:left;                rightright:50%;            }        </style></head><body>        <div class="p">            <h1 class="c">Test Float Element Center</h1>        </div>    </body>    </html>  

使用CSS居中浮动元素的方法