如何实现div等块级元素水平垂直居中

最新推荐文章于 2021-07-01 15:38:28 发布

kaolagirl

最新推荐文章于 2021-07-01 15:38:28 发布

阅读量687

点赞数

分类专栏：笔记前端布局 html+css+js 文章标签： css html

本文链接：https://blog.csdn.net/kaolagirl/article/details/108439370

版权

html+css+js 同时被 3 个专栏收录

14 篇文章 1 订阅

订阅专栏

笔记

6 篇文章 1 订阅

订阅专栏

前端布局

2 篇文章 0 订阅

订阅专栏

块级元素水平垂直居中的方法(六种方法)

<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>

方法一：（宽高要确定）

要让div等块级元素水平垂直居中
重要的因素：父级元素要设置相对定位

第一步：就要知道div等块级元素的高度和宽度
第二步：设置位置position为绝对位置，并设置距离页面窗口左边框和上边框的距离为50%
第三步：最后将div等块级元素分别左移和上移，移动的大小为div等块级元素宽度和高度的一半的负数

.box{           
           position:absolute; /*绝对布局*/
           left:50%;
           top:50%;
           width:300px;
           height:200px;
           margin:-100px 0px 0px -150px;/*上边框和左边框*/
           border:1px solid red;
       }

方法二：(元素宽高不确定）

在绝对定位下top,left,bottom,right都设置为0，利用css中的 margin:auto让浏览器自己帮我们水平和垂直居中（宽高不确定）
重要的因素：父级元素要设置相对定位

.box{
           position:absolute; /*绝对布局*/
           left:0px;
           right:0px;
           top:0px;
           bottom:0px;
           width:300px;
           height:200px;
           margin:auto; /*自动获取左边框和上边框的距离*/
           border:1px solid red;
       }

方法三:(元素宽高不确定）

利用绝对定位，配合位移实现水平垂直居中
重要的因素：父级元素要设置相对定位

.box{
    width:300px;
    height:200px:
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}

方法四:利用flex弹性布局（宽高不确定）

弹性布局第一种写法

.container{
    width:300px;
    height:200px:
    display:flex;
    justify-content:center; /*主轴居中*/
    align-item:center;      /*交叉轴居中*/
    
}

弹性布局第二种写法

.container{
            display:flex;  /*弹性布局*/
            width:600px;
            height:600px;
            border:1px solid red;
        }
        .box{
            margin:auto;  /**/
            width:400px;
            height:200px;
            border:1px solid blue;
        }

方法五：利用table-cell布局（宽高不确定）

注意：子元素一定要设置 display:inline-block;

  .container{
            display:table-cell;  /*表格布局*/
            vertical-align: middle;   /*垂直居中*/
            text-align: center;      /*水平居中*/
            width:600px;
            height:600px;
            border:1px solid red;
        }
        .box{
           display:inline-block;  /*重点设置*/
            width:200px;
            height:200px;
            border:1px solid blue;
        }

方法六: （宽高确定）

绝对定位
cal( )函数动态计算实现水平垂直居中

.container{
           position: relative;
            width:600px;
            height:600px;
            border:1px solid red;
        }
        .box{
            position: absolute; /*绝对定位*/
            left:calc((600px - 200px)/2); /**/
            top:calc((600px - 200px)/2);
            width:200px;
            height:200px;
            border:1px solid blue;
        }