CSS元素水平居中

2019-03-13 本文已影响0人 GoFzy

一、块级元素

1.1 margin

这里需要说明的是外边距margin方法只适用于块级元素同时指定了宽度：因为若是非块级元素，左右外边距auto将不会起作用。同时块级元素如果没有指定宽度，默认是占据父级元素宽度的100%。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin居中使用</title>
    <style>
        .father {
            width: 200px;
            margin: 10px auto;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">元素居中</div>
</body>
</html>

1.2 使用定位

该定位方法对元素种类没有要求，因为会默认转换为行内块(inline-block)，只不过需要知道元素的宽度，并将其参照元素设置定位属性。方法原理是首先left:50%;这样元素向左移动参照元素宽度一半的距离，此时还再向右移动回自己一般的距离就能保证元素水平居中：

定位居中原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位居中使用</title>
    <style>
        .father {
            position: relative;
        }
        .son {
            position: absolute;
            width: 200px;
            top: 0;
            left: 50%;
            margin-left: -100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">元素居中</div>
    </div>
</body>
</html>

1.3 translate方法

translate方法原理与定位一致，不过它使用更加方便，即不需要知道元素的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>translate居中使用</title>
    <style>
        .father {
            position: relative;
        }
        .son {
            position: absolute;
            width: 200px;
            top: 0;
            left: 50%;
            transform: translate(-50%,0);
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">元素居中</div>
    </div>
</body>
</html>

二、行内块与行内元素

目前知道的方法是为父级元素添加text-align:center属性，其中父级元素不一定要求是块级元素，行内块元素亦可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-align居中使用</title>
    <style>
        .father {
            display: inline-block;
            width: 500px;
            height: 500px;
            background-color: purple;
            text-align: center;
        }
        .son {
            display: inline-block;
            height: 100px;
            width: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">元素居中</div>
    </div>
</body>
</html>