JS居中|极客笔记

JS居中

在网页开发中，经常会遇到需要将元素居中展示的情况，这不仅可以提升页面的美观度，还可以改善用户体验。在本文中，我们将探讨在使用JavaScript实现元素居中的方法。

水平居中

方法一：使用flex布局

flex布局是一种强大而灵活的布局方式，可以轻松实现元素的居中展示。在使用flex布局时，只需要简单地设置父元素的display属性为flex，并使用justify-content: center来实现水平居中。

<!DOCTYPE html>
<html>
<head>
    <title>Flex布局实现水平居中</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>这是一个居中的段落</p>
    </div>
</body>
</html>

运行结果：段落内容水平居中展示。

方法二：使用定位和transform

另一种常见的实现水平居中的方法是结合使用绝对定位和transform属性。通过将元素的left设置为50%之后，再通过transform属性将元素往回移动自身宽度的一半，从而实现水平方向的居中展示。

<!DOCTYPE html>
<html>
<head>
    <title>使用定位和transform实现水平居中</title>
    <style>
        .centered {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <div class="centered">
        <p>这是一个居中的段落</p>
    </div>
</body>
</html>

运行结果：段落内容水平居中展示。

垂直居中

方法一：使用flex布局

与实现水平居中类似，使用flex布局也可以轻松实现元素的垂直居中。同样地，只需要设置父元素的display属性为flex，并使用align-items: center来实现垂直居中。

<!DOCTYPE html>
<html>
<head>
    <title>Flex布局实现垂直居中</title>
    <style>
        .container {
            height: 300px;
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>这是一个居中的段落</p>
    </div>
</body>
</html>

运行结果：段落内容垂直居中展示。

方法二：使用定位和transform

同样地，结合使用绝对定位和transform属性也可以实现元素的垂直居中。通过将元素的top设置为50%之后，再通过transform属性将元素往回移动自身高度的一半，从而实现垂直方向的居中展示。

<!DOCTYPE html>
<html>
<head>
    <title>使用定位和transform实现垂直居中</title>
    <style>
        .centered {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="centered">
        <p>这是一个居中的段落</p>
    </div>
</body>
</html>

运行结果：段落内容垂直居中展示。

水平垂直居中

有时候我们需要将元素同时水平和垂直居中展示，在这种情况下，我们可以将上述两种方法结合使用。

方法一：flex布局

通过设置父元素为display: flex，同时使用justify-content: center和align-items: center来实现元素的水平垂直居中。

<!DOCTYPE html>
<html>
<head>
    <title>Flex布局实现水平垂直居中</title>
    <style>
        .container {
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>这是一个水平垂直居中的段落</p>
    </div>
</body>
</html>

运行结果：段落内容水平垂直居中展示。

方法二：使用定位和transform

同样地，使用绝对定位和transform属性也可以实现元素的水平垂直居中展示。通过将元素的top和left都设置为50%之后，再通过transform属性将元素往回移动自身宽度和高度的一半，从而实现水平垂直方向的居中展示。

<!DOCTYPE html>
<html>
<head>
    <title>使用定位和transform实现水平垂直居中</title>
    <style>
        .centered {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="centered">
        <p>这是一个水平垂直居中的段落</p>
    </div>
</body>
</html>

运行结果：段落内容水平垂直居中展示。