div垂直居中的方法！！

最新推荐文章于 2024-03-11 18:35:59 发布

一只鱼_

最新推荐文章于 2024-03-11 18:35:59 发布

阅读量485

点赞数 4

分类专栏： CSS 文章标签： div垂直居中的方法固定宽高div居中不固定宽高div居中

本文链接：https://blog.csdn.net/sinat_31102083/article/details/77434700

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

让div垂直居中的方法

1.给有固定宽高的div垂直居中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给固定宽高的div垂直居中 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            position: relative;
            width: 400px;
            height: 400px;
            margin-top: 30px;
            margin-left: 30px;
            border: 1px solid #000;
        }
        /*.box1是固定宽高的div垂直居中方法*/
        .box1 {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
            width: 200px;
            height: 200px;
            background-color: #C0C0C0;
        }

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

在网页中显示入下图：
这里写图片描述

2.给不固定宽高的div
- - - 第一种：利用伪类元素和inline-block，vertical-align。前提条件是居中的元素的inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给不固定的宽高的div居中的方法1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            text-align: center;
            border: 1px solid #000;

        }
        .box:before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
            margin-right: -0.3em;  
        }
        .box1 {
            display: inline-block;
            vertical-align: middle;
            width: 50%;
        }
    </style>
</head>
<body>
    <div class="box" style="height: 300px;">
        <div class="box1">
            <h1>给不固定的宽高div</h1>
            <p>给不固定的宽高的div居中的方法1：利用伪类元素和inline-block，vertical-align。前提条件是居中的元素的inline-block</p>
        </div>
    </div>
</body>
</html>

给不固定的宽高div

— 第二种：使用网页最开始的布局，table布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table布局</title>
    <style>
        .box {
            display: table;
            width: 100%;

        }
        .box1 {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="box" style="border: 1px solid #000;">
        <div class="box1">
            table布局,table布局,table布局,table布局,table布局.
        </div>
    </div>
</body>
</html>

这里写图片描述

注释:上面2种兼容IE8

–第三种：利用css3的tranlate(),不兼容IE8，但比较通用！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            position: fixed;
            top: 50%;
            left: 50%;
            background-color: #c0c0c0;
            width: 50%;
            height: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
            -moz-transform: translateX(-50%) translateY(-50%);
            -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

这里写图片描述

其他方法
- - 1.使用flex布局，在不固定宽高div水平垂直居中，在它的父元素添加

            display: flex;
            justify-content: center;
            align-items: center;

如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            justify-content: center;
            align-items: center;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="box1">采有flex布局</div>
    </div>
</body>
</html>

这里写图片描述

-—2.利用margin：auto
在设置块级元素margin：0 auto 时，这个块级元素左右居中，然后使用定位来设置块级元素上下居中。这样不就可以实现让不给宽高的div实现水平垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #C9C9C5;
        }
        .box1 {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 50%;
            height: 50%;
            margin: auto;
            background-color: #C0C0C0;

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