• CSS垂直居中的实现


    这个问题可以说是老生常谈了,面试时经常问道,一直没整理过,这次做个系统梳理

    1、利用display:table实现

    从caniuse.com上查到,display:table可以兼容到IE8,以目前环境大部分场合都没问题,上代码

    .table{display: table;width: 100%;outline: 1px solid;}
    .table>div{display: table-cell;vertical-align: middle;text-align: center;height: 300px;}
    .content{outline: 1px solid green;width: 200px;display: inline-block;text-align: left;}
    <div class="table">
        <div>
            <span class="content">这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。</span>
        </div>
    </div>

    适用于内容区宽度,高度不固定的情况

    2、利用绝对定位

    这是最容易想到的,也是兼容性最好的,但必须知道内容区宽高,上代码

    .absolute-center{outline: 1px solid;position: relative;height: 600px;}
    .content{width: 200px; height: 150px; outline: 1px solid green;position: absolute;left: 50%;top:50%;margin-left: -100px;margin-top: -75px;}
    <div class="absolute-center">
        <div class="content">
            这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。
        </div>
    </div>
    margin-left: -100px;margin-top: -75px;

    替换成

    transform: translateX(-100px) translateY(-75px);

    也能达到一样的效果,只不过要注意兼容问题

    这种方式适合与JavaScript一起使用

    3、依然是绝对定位

    .container{height: 600px; outline: 1px solid;position: relative;}
    .content{position: absolute;left: 0;top: 0;right: 0;bottom: 0;width: 200px;height: 100px;outline: 1px solid green;margin: auto;}
    <div class="container">
        <div class="content">
            这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。
        </div>
    </div>

    这里要注意的是一定要设置margin为auto,该属性的默认是为0,对于从左往右书写的语言体系,在外边距采用默认值的情况下,会先计算应用left和top值,right和bottom的值将会用包含块(通常是父元素)的宽高减去该元素的宽高以及left和right的值得到,这种情况下是无法得到居中效果的

    4、利用height和负外边距

    这种方法需要额外增加一个元素

    .absolute-center{outline: 1px solid;position: relative;height: 600px;}
    .floater{height: 50%;margin-bottom: -75px;}
    .content{width: 200px; height: 150px; outline: 1px solid green;background-color: gainsboro;margin: 0 auto;}
    <div class="absolute-center">
        <div class="floater"></div>
        <div class="content">
                    这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。
        </div>
    </div>

     5、利用伪元素占位

    .container{height: 600px; outline: 1px solid;text-align: center;}
    .container::after{content:"";width: 0;height: 100%;display: inline-block;vertical-align: middle;}
    .content{width: 200px;height: 100px;outline: 1px solid green;display: inline-block;vertical-align: middle;}
    <div class="container">
        <div class="content">
            这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。
        </div>
    </div>

     6、flex

    .container{display: flex;text-align: center;height: 400px;outline: 1px solid;}
    .content{margin:auto;outline: 1px solid green;}
    <div class="container">
        <span class="content">
            这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。
        </span>
    </div>

    IE edge才实现,其他版本IE都不兼容

    7、还是flex

    .container{display: flex;justify-content:center;align-items:Center;height: 400px;outline: 1px solid;}
    .content{outline: 1px solid green;}
    <div class="container">
        <span class="content">
            这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。
        </span>
    </div>

     flex方法适用于移动端

  • 相关阅读:
    对我比较有用的网站
    ubuntu各种安装
    arabaraba
    镜像源相关
    硬盘相关
    python模块
    递归和循环两种方式实现未知维度集合的笛卡尔积
    单例模式的两种实现方式
    经典String str = new String("abc")内存分配问题
    js方法的命名不能使用表单元素的名称或ID
  • 原文地址:https://www.cnblogs.com/diantao/p/7365612.html
Copyright © 2020-2023  润新知