居中方案

来源:转载

居中方案

  • 水平居中
    • 行内元素
      • 父元素设置text-align:center
    • 定宽块元素
      • 设置 margin 左右为 auto
      • 块元素文本居中设置text-align:center
    • 不定宽块元素
      • 设置 display 为 table,margin 左右为 auto
        利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。
      • 设置 display 为 inline 或 inline-block,按行内元素居中处理
      • 给父元素设置float:left position:relative 和 left:50%,且:
        float隐性改成了display:inline-block使得div获得宽度自适应特性(这是关键),本质是触发了BFC。所以换成​ display:inline-block 或 display:flex也可以。或者不要float:left position:relative ,直接写成position:absolute等。
        • 子元素设置 position:relative 和 left: -50% 来实现水平居中,会溢出父元素盒模型
        • 或者使用css3的transform: translateX(-50%),效果一样,会溢出父元素盒模型
        • 子元素还可以用 margin-left:-50% 来居中,但是这样会使子元素宽度变为实际宽度的1.5倍
  • 垂直居中
    • 父元素高度确定的单行文本
      • 设置父元素的 height 和 line-height 高度一致。
        line-height 与 font-size 的计算值之差,在 CSS 中成为“行间距”。
    • 父元素高度确定的多行文本
      • 设置父元素 display:table
      • 用一个元素包裹多行标签元素,设置 display:table-cell 和 vertical-align:middle
    • 父子元素高度未知
      • 设置父元素 position:relative
      • 设置子元素 position: absolute top: 50% transform: translateY(-50%)
  • flex(不兼容IE)
    • 父元素设置
    • display:flex;/*Flex布局*/
    • display: -webkit-flex; /* Safari */
  • 附:隐性改变display类型
    • 元素(不论之前是什么类型元素,display:none 除外)
    • 设置以下 2 个句之一:
    • position : absolute
    • float : left 或 float:right
    • 元素的display显示类型就会自动变为以 display:inline-block 的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素。

分享给朋友:
您可能感兴趣的文章:
随机阅读: