使Html元素水平垂直居中的几种方法

前言

项目中往往需要使得元素上下左右都居中，即水平垂直居中，我想即使是菜鸟前端工程师也会略知一二种解决方法。需要居中的元素有的有固定高度，此类元素的居中容易解决，还有另外一种情况，就是需要居中的元素高度不固定（高度由元素中的文字或图片等元素决定），此文主要列举了几种使元素水平垂直居中的方法。

一、元素高度固定

方法1

定位，50%，margin负距

.box{
width: 400px;
height: 300px;
border: 2px solid black;
/* 把元素变成定位元素 */
position: absolute;
/* 元素距离上，左都为50% */
left: 50%;
top: 50%;
/* 让元素的左外边距，上外边距为元素宽高的1/2 注意margin是负距*/
margin-top: -150px;
margin-left: -200px;
}

图解：

方法一.png

方法2

定位，四个方向为都为0 ，margin：auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            width: 100vw;
            height: 100vh;
            background: #eee;
            overflow: hidden;
            position: relative;
        }
        .container > div{
            width: 30vw;
            height: 30vw;
            border: 1px solid black;
            background: yellow;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div></div>
    </div>
</body>
</html>

图解

方法二.png

方法三

使用伪元素利用inline-block与vertical-align配合伪元素达到垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .dialog_container {
            text-align: center;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.35);
        }
        /* 伪元素上下居中 */
        .dialog_container:after {
            display: inline-block;
            width: 0;
            height: 100%;
            content: "";
            vertical-align: middle;
            background: red;
        }
        /* 真正居中的元素 */
        .dialog_box {
            display: inline-block;/*只有inline-block，inline和table可以使用vertical-align:middle*/
            vertical-align: middle;
            width: 50%;
            height: 50%;
            background: yellow;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="container dialog_container">
        <div class="dialog_box"></div><!--需要居中的元素-->
    </div>
</body>
</html>

二、元素高度不固定

方法一

使用transform: translate（）使元素偏移到中间位置

.box2 {
position: absolute;
left: 50%;
top: 50%;
/* 设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)*/
transform: translate(-50%, -50%);
}

方法二

使用flex布局，此方法在本人简书关于flex布局的文章里面有所提及

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            width: 100vw;
            height: 100vh;
            background: #eee;
            overflow: hidden;
            display: flex;
        }
        .container > div{
            width: 30vw;
            height: 30vw;
            border: 1px solid black;
            background: yellow;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div></div>
    </div>
</body>
</html>

方法三

使用display:flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div{
            width: 580px;
            height: 180px;
            background: grey;
            margin: 0 auto;

            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="div">
        <div>dsafadsds</div>
        <div>5655</div>
    </div>
</body>
</html>

最后编辑于：2020.05.13 16:56:52