HTML居中

上下左右居中
<html>
    <head>
        <meta charset="UTF-8">
        <style>
        // 方式一：使用CSS3的transform
        .center-css3 { 
            width: 600px; 
            height: 200px; 
            position:fixed; 
            top:50%; left:50%; 
            transform: translate(-50%, -50%);
            background-color: #00ff55;
        }

        // 方式二：指定偏移值
        .center-css2 { 
            width: 400px; 
            height:150px; 
            position:fixed; 
            top:50%; left:50%; 
            margin-left: -200px;
            margin-top: -75px;
            background-color: #ff5500;
        }

        // 方式三：使用JS
        </style>
    </head>
    <body>
        <div class="center-css3">CSS3：使用transform，IE9才开始支持。</div>
        <div class="center-css2">CSS2</div>
    </body>
</html>
首页 » HTML居中

相关内容
