js实现盒子水平垂直居中

编程入门行业动态更新时间:2024-10-14 08:29:40

假设我们不知道盒子的宽高

方法1：绝对定位 + transform中的translate。首先对子元素进行绝对定位，父元素进行相对定位，然后将子元素的左上角通过top:50%和left:50%定位到页面中央，最后通过translate来调整子元素的中心点到页面的中心。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
    <style>
        .father {
           position: relative;
           margin: auto;
           width: 200px;
           height: 200px;
           border: 5px solid black;
        }
        .son {
            position: absolute;
            background-color: brown;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            text-align: center; /*使得文字水平居中*/
            line-height: 100%; /*使得行高和子元素的高度一致*/
            vertical-align:middle; /*使得文字的垂直方向上居中，从而使文字整体水平居中*/
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>
</html>

方法2 ：使用flex布局。首先在容器上通过display:flex开启flex布局，然后分别设置主轴上的项目居中排列justify-content:center和交叉轴上的项目居中排列align-items:center。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
    <style>
        .father {
           display: flex;
           margin: auto;
           width: 200px;
           height: 200px;
           border: 5px solid black;
           justify-content: center;
           align-items: center;
        }
        .son {
            background-color: brown;
            width: 50px;
            height: 50px;
            text-align: center; /*使得文字水平居中*/
            line-height: 50px; /*使得行高和子元素的高度一致*/
            vertical-align:middle; /*使得文字的垂直方向上居中，从而使文字整体水平居中*/
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>
</html>

假设我们知道盒子有宽高

方法3：使用绝对定位+margin。首先对子元素绝对定位，对父元素相对定位，然后将子元素的top，bottom，left，right四个方向上的属性设置为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现子元素的水平和垂直方向上的居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
    <style>
        .father {
           position: relative;
           margin: auto;
           width: 200px;
           height: 200px;
           border: 5px solid black;
        }
        .son {
            position: absolute;
            background-color: brown;
            width: 50px;
            height: 50px;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            text-align: center; /*使得文字水平居中*/
            line-height: 50px; /*使得行高和子元素的高度一致*/
            vertical-align:middle; /*使得文字的垂直方向上居中，从而使文字整体水平居中*/
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>
</html>

假设我们知道盒子的具体宽高

方法4：绝对定位+margin负值。首先对子元素绝对定位，父元素相对定位，然后将子元素的左上角通过top:50%和left:50%定位到页面中央，最后通过margin负值来调整子元素的中心点到页面的中心。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
    <style>
        .father {
           position: relative;
           width: 200px;
           height: 200px;
           border: 5px solid black;
          
        }
        .son {
            position: absolute;
            background-color: brown;
            width: 50px;
            height: 50px;
            top: 50%;
            left: 50%;
            margin-top: -25px; /*自身height的一半*/
            margin-left: -25px; /*自身width的一半*/
            text-align: center; /*使得文字水平居中*/
            line-height: 50px; /*使得行高和子元素的高度一致*/
            vertical-align:middle; /*使得文字的垂直方向上居中，从而使文字整体水平居中*/
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>
</html>