前端

css3水平垂直居中（不知道宽高同样适用）

云博小周宇2 Mins Read

css水平垂直居中

第一种方法：

　　　　在父div里加：

      display: table-cell;
      vertical-align: middle;
      text-align: center;

　　　　内部div设置　

    display: inline-block;

　　　　例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css水平垂直居中</title>
    <style> body { margin: 0;
        } .center { width: 250px; height: 250px; border: 2px solid red; font-size: 18px;

            /* 方法1 */ display: table-cell; vertical-align: middle; text-align: center;
        } .center_inner { width: 100px; height: 100px; background-color: pink;
            
            /* 方法1 */ display: inline-block;
        } 
    </style>
</head>

<body>
    <div class="center">
        <div class="center_inner">面朝大海，春暖花开！</div>
        <!-- <div class="center_inner center_last">海阔天空</div> -->
    </div>
</body>

</html>
使父元素内的所有行内元素水平垂直居中（内部div设置display:inline-block即可）。

中间的粉色是居中的div

第二种方法：

　　在居中的div元素里加

   /* 第二种方法 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform:translate(-50%,-50%);

例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css水平垂直居中</title>
    <style> .center { width: 100px; height: 100px; background-color: pink;
            /* 第二种方法 */ position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="center">海阔天空</div>
</body>

</html>

　　　　translate()函数可以在不知道宽高的情况下，利用它实现水平垂直居中。

　　　　translate(-50%, -50%)作用是，往上（X轴），左（Y轴）移动自身长度的50%，以使其居于中心位置。

　　　　如果使用top:50%, left:50%,是以左上角为原点，故不处于中心位置；但如果知道宽高,可以

            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;

第三种方法：用弹性布局实现垂直左右居中

display:flex; 设置.wrap为弹性布局

justify-content:center;定义项目在主轴(水平方向)上居中对齐

align-items:center;定义项目在交叉轴(垂直方向)上居中对齐

例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css水平垂直居中</title>
    <style> * { margin: 0; padding: 0;
        } .center { width: 200px; height: 200px; border: 2px solid red; margin:40px; display: flex; justify-content: center; align-items: center;
        } .inner { width: 50px; height: 50px; background-color: pink;
        }
    </style>
</head>

<body>
    <div class="center">
        <div class="inner">朝气蓬勃</div>
    </div>
</body>

</html>

效果图：

 

 

　　如有疑问请加群，讨论854184700