zoukankan      html  css  js  c++  java
  • 盒子水平垂直居中10种方法

    盒子水平垂直居中10种方法

    HTML代码

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

    第一种:通过绝对定位的方式 absolute + 负margin

    • 首先知道子元素的宽高,给子元素设置top:50%;left:50%,

    • 但绝对定位是基于子元素的左上角,我们所希望的效果是子元素的中心居中显示。。。。借助外边距的负值,负的外边距可以让元素向相反方向定位,

    • 通过指定子元素的外边距为子元素宽度一半的负值,就可以让子元素居中了

    #container { 
    position: relative; 
     600px; 
    height: 500px; 
    border: 1px solid #000; 
    margin: auto; 
    } 
    #box { 
    position: absolute; 
     200px; 
    height: 200px; 
    left: 50%; 
    top: 50%; 
    margin: -100px -100px; 
    background-color: #0ff; 
    } 
    

    优点: 比较好理解,兼容性好

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

    第二种:也是通过绝对定位的方式 absolute + margin auto

    • 这个是需要将各个方向的距离都设0,再讲margin设为auto;就行

    优点: 兼容性也很好

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

    第三种:absolute + calc(计算)

    • 这种方法top的百分比是基于元素的左上角,那么在减去宽度与高度的一半就好了

    • calc:任何长度值都可以使用calc()函数进行计算;

    • calc()函数使用标准的数学运算优先级规则;

    • 它支持 “+”, “-”, “*”, “/” 运算

    也可以查看calc教程: https://www.runoob.com/cssref/func-calc.html

    优点: 他的兼容性依赖的是calc的兼容性

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

    第四种:absolute + transform (过渡)

    • 这个方法不需要子元素固定宽高

    • 修复绝对定位的问题,还可以使用css3新增的transform,transform的translate

    • 属性也可以设置百分比,其是相对于自身的宽和高,所以可以将translate设置为-50%,就可以做到居中了

    
    #container { 
    position: relative; 
     600px; 
    height: 600px; 
    border: 1px solid #000; 
    margin: auto; 
    } 
    #box { 
    position: relative; 
    top: 50%; 
    left: 50%; 
     200px; 
    height: 200px; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    background-color: #0ff; 
    } 
    

    优点: 代码量少

    缺点: IE8不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象.

    第五种:line-height

    • 只对文本有效果,对定宽高的div是没有用的。所以在文本水平垂直居中时使用。

    优点: 代码简洁

    缺点: 只对文本有效,只对单行文本有效,多行文本不可以

    第七种:table 形式

    • 通过table单元格的形式设

    优点: tabel单元格中的内容天然就是垂直居中的,只要添加一个水平居中属性就好了

    缺点: 这个不是table的正确方法,不是很建议使用,但是也是可以实现的

    第八种:table-cell实现水平垂直居中: table-cell middle center组合使用

    直接给父级设

    #container { 
          display: table-cell;
          vertical-align: middle;
          text-align: center;
            240px;
           height: 180px;
           border:1px solid #666;
    }
    

    第九种:弹性盒子的方式

    #container { 
     600px; 
    height: 600px; 
    border: 1px solid #000; 
    display: flex
    justify-content: center;
    align-items: center;
    } 
    

    优点: 移动端使用灵活自如

    缺点: pc端需要根据兼容情况来判定

    第十种:grid(网格布局)

    • 给父级设display:grid;

    • 给子元素设align-self: center;justify-self: center;

    优点: 代码量少

    缺点: 兼容不如flex,建议用flex

  • 相关阅读:
    zbb20181207 springboot @ConfigurationProperties使用
    zbb20181206 logback,lombok 默认日志logback配置解析
    Spring Boot (8) 全局异常处理
    Spring Boot (7) JdbcTemplate访问数据库
    Spring Boot (6) Spring Data JPA
    Spring Boot (4) 静态页面和Thymeleaf模板
    Spring Boot (3) 热部署devtools
    Spring Boot (2) Restful风格接口
    Spring Boot (1) 构建第一个Spring Boot工程
    idea使用maven搭建ssm框架实现登陆商品增删改查
  • 原文地址:https://www.cnblogs.com/mxnl/p/13641318.html
Copyright © 2011-2022 走看看