menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

div 元素居的N种常用方法

武飞扬头像
风雨同舟jk
帮助1人

        本文主要记录几种常用的div盒子水平垂直都居中的方法。本文主要参考了该篇博文并实践加以记录说明以加深理解记忆 css之div盒子居中常用方法大全

        本文例子使用的 html body结构下的div 盒子模型如下：

  1.  
    <body>
  2.  
    <div class="container">
  3.  
    <div class="box"></div>
  4.  
    </div>
  5.  
    </body>

         例子盒子居中效果都如下图：

学新通

注：当把div 盒子模型中子div换成其他块级元素，如<p>或<h1>~<h6>时，以下方法仍然奏效。但当把子div换成行内元素，如<span>时，第6,第7种方法将失效。

1、弹性布局 设置容器项目在横轴和纵轴上都居中对齐

  1.  
    <style>
  2.  
    .container{
  3.  
    height: 300px;
  4.  
    width: 300px;
  5.  
    border: 1px solid black;
  6.  
    background-color: aliceblue;
  7.  
    display: flex;
  8.  
    justify-content: center;
  9.  
    align-items: center;
  10.  
    }
  11.  
     
  12.  
    .box{
  13.  
    width: 120px;
  14.  
    height: 120px;
  15.  
    background: #55a9ff;
  16.  
    }
  17.  
    </style>
学新通

 

2、弹性布局 设置容器项目 margin:auto

        该方法可以不设置容器项目横轴和纵轴的对齐方式，直接设置margin:auto即可2、弹性布局 设置容器项目 margin:auto

  1.  
    <style>
  2.  
    .container{
  3.  
    height: 300px;
  4.  
    width: 300px;
  5.  
    border: 1px solid black;
  6.  
    background-color: aliceblue;
  7.  
    display: flex;
  8.  
    }
  9.  
     
  10.  
    .box{
  11.  
    width: 120px;
  12.  
    height: 120px;
  13.  
    margin: auto;
  14.  
    background: #55a9ff;
  15.  
    }
  16.  
    </style>
学新通

  

3、绝对定位法

        父div要使用其中一种定位方式：relative / absolute / sticky / fixed，子div使用绝对定位，并使它的 top、left、right、bottom 都为0且margin:auto 即可

  1.  
    <style>
  2.  
    .container{
  3.  
    height: 300px;
  4.  
    width: 300px;
  5.  
    border: 1px solid black;
  6.  
    background-color: aliceblue;
  7.  
    position: relative;
  8.  
    }
  9.  
     
  10.  
    .box{
  11.  
    width: 120px;
  12.  
    height: 120px;
  13.  
    position: absolute;
  14.  
    background: #55a9ff;
  15.  
    top: 0;
  16.  
    left: 0;
  17.  
    right: 0;
  18.  
    bottom: 0;
  19.  
    margin: auto;
  20.  
    }
  21.  
    </style>
学新通
  • 绝对定位法还可以只设置top、bottom为0，实现只垂直居中
  1.  
    <style>
  2.  
    .container{
  3.  
    height: 300px;
  4.  
    width: 300px;
  5.  
    border: 1px solid black;
  6.  
    background-color: aliceblue;
  7.  
    position: relative;
  8.  
    }
  9.  
     
  10.  
    .box{
  11.  
    width: 100px;
  12.  
    height: 100px;
  13.  
    position: absolute;
  14.  
    background: #55a9ff;
  15.  
    top: 0;
  16.  
    bottom: 0;
  17.  
    margin: auto;
  18.  
    }
  19.  
    </style>
学新通

学新通

  •  同理可以只设置left、right为0，实现只水平居中 

4、transform居中法

        使用 transform 可以不用管子div自身的宽高，但要设置父子div的position属性，可都设置成 relative / absolute，此方法IE9 以下不支持

  1.  
    <style>
  2.  
    .container{
  3.  
    height: 300px;
  4.  
    width: 300px;
  5.  
    border: 1px solid black;
  6.  
    background-color: aliceblue;
  7.  
    position: relative;
  8.  
    }
  9.  
     
  10.  
    .box{
  11.  
    width: 120px;
  12.  
    height: 120px;
  13.  
    position: absolute;
  14.  
    background: #55a9ff;
  15.  
    top: 50%;
  16.  
    left: 50%;
  17.  
    transform: translate(-50%,-50%);
  18.  
    }
  19.  
    </style>
学新通

5、负margin居中

        利用子div 负的margin来进行居中，此方法要知道子div固定的宽高，且margin-top、margin-left 要是子div 自身宽高负的一半值

  1.  
    <style>
  2.  
    .container{
  3.  
    height: 300px;
  4.  
    width: 300px;
  5.  
    border: 1px solid black;
  6.  
    background-color: aliceblue;
  7.  
    position: relative;
  8.  
    }
  9.  
     
  10.  
    .box{
  11.  
    width: 120px;
  12.  
    height: 120px;
  13.  
    position: absolute;
  14.  
    background: #55a9ff;
  15.  
    top: 50%;
  16.  
    left: 50%;
  17.  
    margin-top: -60px;
  18.  
    margin-left: -60px;
  19.  
    }
  20.  
    /* 如果box的宽高都是100px,那margin-top和margin-left要是-50px */
  21.  
    </style>
学新通

6、margin固定宽高居中

        此方法要知道父子div的宽高，且要算出子div的margin 的高度和宽度 恰好在父div居中

该方法把子div换成行内元素，如<span>时将会失效

  1.  
    <style>
  2.  
    .container{
  3.  
    height: 300px;
  4.  
    width: 300px;
  5.  
    border: 1px solid black;
  6.  
    background-color: aliceblue;
  7.  
    }
  8.  
     
  9.  
    .box{
  10.  
    width: 120px;
  11.  
    height: 120px;
  12.  
    background: #55a9ff;
  13.  
    margin: 90px 90px;
  14.  
    }
  15.  
    /* 如果 box 的宽高都是 100px,那么 margin: 100px 100px; */
  16.  
    </style>
学新通

7、table-cell居中

        此方法是将父div转换成表格单元格显示，然后使用垂直居中并且子div左右margin auto实现，该方法把子div换成行内元素，如<span>时将会失效

  1.  
    <style>
  2.  
    .container{
  3.  
    height: 300px;
  4.  
    width: 300px;
  5.  
    border: 1px solid black;
  6.  
    background-color: aliceblue;
  7.  
    display: table-cell;
  8.  
    vertical-align: middle;
  9.  
    }
  10.  
     
  11.  
    .box{
  12.  
    width: 120px;
  13.  
    height: 120px;
  14.  
    background: #55a9ff;
  15.  
    margin: 0 auto; /* 不能省 */
  16.  
    }
  17.  
    </style>
学新通

8、不确定宽高居中(绝对定位百分数)

        此方法不设置子div的宽高，其宽高根据设置占用父div的比例来算，left和right的百分数一样就可以实现水平居中，top和bottom的百分数一样就可以实现垂直居中。其中子div要设置成绝对定位，父div 要设置成 relative / absolute / fixed / sticky

  1.  
    <style>
  2.  
    .container{
  3.  
    height: 300px;
  4.  
    width: 300px;
  5.  
    border: 1px solid black;
  6.  
    background-color: aliceblue;
  7.  
    position: relative;
  8.  
    }
  9.  
     
  10.  
    .box{
  11.  
    position: absolute;
  12.  
    background: #55a9ff;
  13.  
    top: 25%;
  14.  
    left: 25%;
  15.  
    right: 25%;
  16.  
    bottom: 25%;
  17.  
    margin: auto;
  18.  
    }
  19.  
    /* top / left / right / bottom 设置的比例不一样，box 的宽高将会随之变大或变小*/
  20.  
    </style>
学新通

学新通

以上方法如有错误请各位不吝指教，如以后有别的方法将会往下继续添加，各位有其他方法可留言告知。

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhgfihfc
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群