茴字元素居中有多少种写法

slug

水平居中

水平居中: 行内元素

水平居中: 块级元素

垂直居中

首先, 垂直居中要求父节点有高度, 不然”居中”就没必要了.
其次, 要求居中的元素要比父节点小.

垂直居中: 行内元素

  • 如果要居中的内容只有一行:

    • 把父节点上下padding相等且分别占高度的一半, 让它高度变成0. 这个方法改变了原有的高度. 请看代码示例的图1和图2的高度差.
    • 在父节点上把line-height设为和高度相等

      See the Pen centering inline element vertical by icymind (@icymind) on CodePen.

  • 如果内容有多行:

    • 和只有一行时一样, 可以把父节点的padding设置为相等且分别为高度的一半. 这个方法会使原有高度变大, 需要调整padding值
    • 用flex
    • 父元素应用display: table, 待居中元素应用display:table-cell; vertical-align: middle
    • 用幽灵元素, 通过::before伪元素添加一个100%的inline-block, 然后将伪元素和待居中元素的对齐方式设置为vertical-align: middle. 因为增加了一个伪元素, 用去了一点点宽度, 因此需要调整待居中元素的宽度, 否则会内容会被移动到父元素外显示, 而且要调整margin-left值, 让它向左移动一点点.

      See the Pen centering multiline inline element vertical by icymind (@icymind) on CodePen.

垂直居中: 块级元素

  • flex
  • 需要居中的元素高度确定: 父元素设置为relative定位, 待居中元素设置为absolute定位, 定位点在left:50%处, 最后应用margin-top为元素高度一半的负值把元素上提.
  • 需要居中的元素高度不确定: 定位的设置和高度确定时的情形一样. 但是没法用margin-top把元素上提, 只能用transform: translateY(-50%)

See the Pen centering multiple block element vertically by icymind (@icymind) on CodePen.

双向居中

  • Absolute Centering. 把待居中元素设置为display: absolute, 使其脱离正常流. 在正常流里margin-top/bottom: auto auto会被当成0. 但是在绝对定位里, auto则会使得上下margin平分除内容外的剩余高度, 就像水平居中一样. 为了让待居中元素在父元素中充分布局, 还需要设置top, left, right, bottom为0. 如果要居中多个元素, 那么要外包一层并且显式确定尺寸. 将外层声明为display:inline-block并不能使其恰好包裹里层元素. 原因可能跟display属性有关.
  • flex
  • 需要居中的元素高度确定
  • 需要居中的元素高度不确定

See the Pen centering multiple block element vertically && horizontally by icymind (@icymind) on CodePen.

参考链接:

Absolute Centering in CSS