首頁手記四種方法讓塊元素在網頁中絕對居中

四種方法讓塊元素在網頁中絕對居中

標簽：

Html/CSS

在一些页面中需要让一个块元素绝对居中，例如，一个跳转页中的提示信息框就需要让其中页面的正中位置显示提示信息，那么如何让一个块元素在页面中绝对居中呢?下面我列出4种解决方法：
1.利用table中内容在单元格中默认垂直居中的特性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块元素绝对居中</title>
    <style>
        html,body,table{
            margin:0;
            height:100%;
        }
        table{
            width:100%;
        }
        #box{
            width:300px;
            height:300px;
            background:teal;
            margin:auto;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>
                <div id="box"></div>
            </td>
        </tr>
    </table>
</body>
</html>

2.利用css3中的transform属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块元素绝对居中</title>
    <style>
        *{
            margin:0;
        }
        #box{
            width:300px;
            height:300px;
            background:maroon;
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

3.利用margin属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块元素绝对居中</title>
    <style>
        *{
            margin:0;
        }
        #box{
            width:300px;
            height:300px;
            background:silver;
            position:absolute;
            left:50%;
            top:50%;
            margin-left:-150px;
            margin-top:-150px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

4.利用利用position属性把left，top，right，bottom四个的值设为0，再用margin:auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块元素绝对居中</title>
    <style>
        *{
            margin:0;
        }
        #box{
            width:300px;
            height:300px;
            background:pink;
            position:absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            margin:auto;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

點擊查看更多內容