Teraflopst
8/11/2016 - 3:05 PM

CSS 布局方案

CSS 布局方案

css-layout.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS布局</title>
    <style type="text/css">
        .container {
            width: 400px;
            height: 600px;
            background: #FF004E;
            top: 50%;
            left: 50%;
            position: absolute;
            margin-left: -200px;
            margin-top: -300px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>绝对定位实现垂直水平居中</h2>
        <p>优点：兼容性好</p>
        <p>缺点：需要知道宽高，不够灵活</p>
    </div>
</body>
</html>
css-layout-02.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS布局</title>
    <style type="text/css">
        .container {
            width: 400px;
            height: 600px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #FF004E;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>transform 实现垂直水平居中</h2>
        <p>优点：不需要知道宽高，灵活</p>
        <p>缺点：兼容不好，在Mobile设备上建议使用</p>
    </div>
</body>
</html>