三種絕對定位元素的水平垂直居中的辦法-css教學-PHP中文網

三種絕對定位元素的水平垂直居中的辦法

php中世界最好的语言

發布： 2018-03-22 15:26:52

原創

5640 人瀏覽過

這次帶給大家三種絕對定位元素的水平垂直居中的辦法，實現絕對定位元素水平垂直居的注意事項有哪些，下面就是實戰案例，一起來看一下。

1.css實作居中

缺點：需要事先知道元素的寬度和高度。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 600px; 
            height: 400px;
            position: absolute; 
            left: 50%; top: 50%;
            border:1px solid #000;
            background:red;
            margin-top: -200px;    /* 高度的一半 */
            margin-left: -300px;    /* 宽度的一半 */
        }
    </style>
</head>
<body>
    <p class="box">
    </p>
</body>
</html>

登入後複製

2、css3實作水平垂直居中

#注意：無論元素的尺寸是多少，都可以居中。不過IE8以上才相容於這種寫法，行動端可忽略。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 600px; 
            height: 400px;
            position: absolute; 
            left: 50%;
            top: 50%;
            border:1px solid #000;
            background:red;
            transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
        }
    </style>
</head>
<body>
    <p class="box">
    </p>
</body>
</html>

登入後複製

3、margin：auto實現居中

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 600px; 
            height: 400px;
            position: absolute; 
            left: 0;
            top: 0; 
            right: 0; 
            bottom: 0;
            border:1px solid #000;
            background:red;
            margin: auto;    /* 有了这个就自动居中了 */
        }
    </style>
</head>
<body>
    <p class="box">
    </p>
</body>
</html>

登入後複製

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！