• 无敌居中!!!!


    不需要知道宽高:

    CSS transform

    <div 'style='position:relative;' >

      <div style='position:absolute;top:50%;left:50%; transform: translate(-50%, -50%);'></div>

    </div>

    使用display:table-cell来居中

    对于那些不是表格的元素,我们可以通过display:table-cell 来把它模拟成一个表格单元格,这样就可以利用表格那很方便的居中特性了。
    <div style='display: table-cell; vertical-align: middle; text-align: center;' >

      <div style='display: inline-block;'></div>

    </div>

    flex布局

    <div style='display: flex;justify-content:center;align-items:center;' >

      <div></div>

    </div>

    需要知道宽高:

    使用绝对定位来居中(IE6.7无效)

    通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的,而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离,所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置,这个负的margin值就取元素宽度或高度的一半.
    <div style='200px;height:200px;position:relative' >

      <div style='100px;height:100px;position:absolute; left:50%;top:50%;margin-left:-50px;margin-top:-50px;'></div>

    </div>

  • 相关阅读:
    net事件丢失解决方法
    Google排名经验谈
    动力漏洞
    Understand简明参考
    修复iReaper
    Bootstrap源码分析
    UTF8编码字节流错误小析
    OAuth2学习及DotNetOpenAuth部分源码研究
    DynamicModuleUtility对象在.net不同版本下的兼容性问题
    MediaWiKi简明安装与配置笔记
  • 原文地址:https://www.cnblogs.com/biglion/p/6196881.html
Copyright © 2020-2023  润新知