块级元素水平垂直居中方法

最新推荐文章于 2023-04-21 15:06:20 发布

dreamer_zhou

最新推荐文章于 2023-04-21 15:06:20 发布

阅读量4.3k

点赞数 4

分类专栏： CSS 文章标签： css margin padding position transform

本文链接：https://blog.csdn.net/wq_zhou/article/details/78145076

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、加padding减height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
         margin: 0; padding: 0; 
        }   
        .box1 {
            width: 200px;
            height: 150px;
            background-color: #aaa;
            padding-top: 50px; /* 加padding减height*/
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
            margin: 0 auto;

        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

这里写图片描述

垂直水平居中方法一：

padding-top:（box2高度-box1高度）/ 2
height: 原height值 - padding-top值
box2：margin: 0 auto （脱离标准流的盒子该属性值失效）

优缺点：

要先知道盒子的宽高，居中盒子不能脱离标准流

二、子绝父相

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
         margin: 0; padding: 0; 
        }   
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #aaa;
            position: relative;

        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

这里写图片描述

垂直水平居中方法二：

box1 positon: realtive && box2 position: absolute
box2: top: 50% , margin-top: -(height/2)
box2: left: 50% , margin-left: -(width/2)

优缺点：

要先知道盒子的宽高

注：

box2盒子直接使用 position: relative 或 positon: absolute
left: top: 或 right: bottom:
box2盒子有border属性时，margin-top与margin-left要减去border的宽

三、margin: auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
         margin: 0; padding: 0; 
        }   
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #aaa;
            position: relative;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
            /* 以下是垂直水平居中关键代码 */
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

这里写图片描述

垂直水平居中方法三：

box1 positon: realtive && box2 position: absolute
box2盒子 top、left、bottom、right值都设为0
box2盒子添加 margin: auto
box2盒子有border属性时，不影响水平垂直居中

优缺点：

可以不需要知道盒子的宽高就能居中
盒子需脱离标准流（positon: absolute），margin: auto垂直方向居中才有效

四、transform: translate(-50%, -50%)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
         margin: 0; padding: 0; 
        }   
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #aaa;
            position: relative;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
            /* 以下是垂直水平居中关键代码 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

        }
    </style>
</head>
<body>
    <div class="box1">box1
        <div class="box2">box2</div>
    </div>
</body>
</html>

这里写图片描述

垂直水平居中方法四：

box1 positon: realtive && box2 position: absolute
box2: top: 50%；left: 50%
box2盒子使用 css3属性 transform: translate(-50%, -50%)代替margin实现偏移量，偏移量根据自身盒子宽高用百分比进行宽高偏移
box2盒子有border属性时，不影响水平垂直居中

优缺点：

可以不需要知道盒子的宽高就能居中
暂无发现居中属性值失效问题

五、display:table-cell

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
         margin: 0; padding: 0; 
        }   
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #aaa;
            display: table-cell;
            vertical-align: middle;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>