css实现水平垂直居中几种常用实现

============================================================================

1 仅适用于居中元素指定宽高：

（1）absolute + 负margin

绝对定位的百分比是相对于父元素的宽高，通过这个特性可以让子元素的居中显示，但绝对定位是基于子元素的左上角，期望的效果是子元素的中心居中显示，为了修正这个问题，可以借助外边距的负值，负的外边距可以让元素向相反方向定位，通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了。

缺点: 是需要知道子元素的宽高

<!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>Document</title>
    <style>
        /* 通用样式 */
        .wp {
    
    
            border: 1px solid red;
            width: 300px;
            height: 300px;
        }
        .box {
    
    
            background: green;
        }
        /* 核心 */
        .wp {
    
    
            position: relative;
        }
        .box {
    
    
            width: 100px;
            height: 100px;

            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
    </style>
</head>
<body>
    <div class="wp">
        <div class="box">123123</div>
    </div>
</body>

在这里插入图片描述

（2）absolute + margin auto

通过设置各个方向的距离都是0，此时再讲margin设为auto，就可以在各个方向上居中了

缺点: 需要知道子元素的宽高

<!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>Document</title>
    <style>
        /* 通用样式 */
        .wp {
    
    
            border: 1px solid red;
            width: 300px;
            height: 300px;
        }
        .box {
    
    
            background: green;
        }
        /* 核心 */
        .wp {
    
    
            position: relative;
        }
        .box {
    
    
            width: 100px;
            height: 100px;

            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="wp">
        <div class="box">absolute + margin auto</div>
    </div>
</body>
</html>

在这里插入图片描述

（3）absolute + calc

css3带来了计算属性，既然top的百分比是基于元素的左上角，那么在减去宽度的一半就好了

缺点: 这种方法兼容性依赖calc的兼容性，需要知道子元素的宽高

<!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>Document</title>
    <style>
        /* 通用样式 */
        .wp {
    
    
            border: 1px solid red;
            width: 300px;
            height: 300px;
        }
        .box {
    
    
            background: green;
        }
        /* 核心 */
        .wp {
    
    
            position: relative;
        }
        .box {
    
    
            width: 100px;
            height: 100px;

            position: absolute;;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
        }
    </style>
</head>
<body>
    <div class="wp">
        <div class="box">absolute + calc</div>
    </div>
</body>
</html>

在这里插入图片描述

2 居中元素无需指定宽高：

（4）absolute + transform

绝对定位的问题，还可以使用css3新增的transform，transform的translate属性也可以设置百分比，其是相对于自身的宽和高，所以可以讲translate设置为-50%，就可以做到居中了。

缺点: 兼容性依赖与对translate2d的兼容性

<!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>Document</title>
    <style>
        /* 通用样式 */
        .wp {
    
    
            border: 1px solid red;
            width: 300px;
            height: 300px;
        }
        .box {
    
    
            background: green;
        }
        /* 核心 */
        .wp {
    
    
            position: relative;
        }
        .box {
    
    
            position: absolute;;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="wp">
        <div class="box">absolute + transform</div>
    </div>

</body>
</html>

在这里插入图片描述

（5）行内元素 lineheight

把box设置为行内元素，通过text-align就可以做到水平居中，但很多同学可能不知道通过vertical-align也可以在垂直方向做到居中。

缺点: 这种方法需要在子元素中将文字显示重置为想要的效果

<!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>Document</title>
    <style>
        /* 通用样式 */
        .wp {
    
    
            border: 1px solid red;
            width: 300px;
            height: 300px;
        }
        .box {
    
    
            background: green;
        }
        /* 核心 */
        .wp {
    
    
            line-height: 300px;
            text-align: center;
            font-size: 0px;
        }
        .box {
    
    
            font-size: 16px;
            display: inline-block;
            vertical-align: middle;
            line-height: initial;
            text-align: left; /* 修正文字 */
        }
    </style>
</head>
<body>
    <div class="wp">
        <div class="box">行内元素 lineheight</div>
    </div>
</body>
</html>

在这里插入图片描述

（6）父元素 table + 子元素 inline-block

css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中

<!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>Document</title>
    <style>
        /* 通用样式 */
        .wp {
    
    
            border: 1px solid red;
            width: 300px;
            height: 300px;
        }
        .box {
    
    
            background: green;
        }
        /* 核心 */
        .wp {
    
    
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .box {
    
    
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="wp">
        <div class="box">父元素 table + 子元素 inline-block</div>
    </div>
</body>
</html>

在这里插入图片描述

（7）父元素 flex 定位

flex作为现代的布局方案，颠覆了过去的经验，只需几行代码就可以优雅的做到水平垂直居中

<!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>Document</title>
    <style>
        /* 通用样式 */
        .wp {
    
    
            border: 1px solid red;
            width: 300px;
            height: 300px;
        }
        .box {
    
    
            background: green;
        }
        /* 核心 */
        .wp {
    
    
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="wp">
        <div class="box">父元素 flex 定位</div>
    </div>
</body>
</html>

在这里插入图片描述

（8）父元素 grid 布局

css新出的网格布局，由于兼容性不太好，一直没太关注，通过grid也可以实现水平垂直居中

<!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>Document</title>
    <style>
        /* 通用样式 */
        .wp {
    
    
            border: 1px solid red;
            width: 300px;
            height: 300px;
        }
        .box {
    
    
            background: green;
        }
        /* 核心 */
        .wp {
    
    
            display: grid;
        }
        .box {
    
    
            align-self: center;
            justify-self: center;
        }
    </style>
</head>
<body>
    <div class="wp">
        <div class="box">父元素 grid 布局</div>
    </div>
</body>
</html>

在这里插入图片描述