CSS - 实现垂直居中

71 阅读1分钟

有以下代码:

<div class="parent">
  <div class="child">
    一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
  </div>
</div>

要求子节点中的内容垂直方向居中,设计CSS样式。

  1. 如果parent没有规定高度样式,则添加上下padding即可

  2. 如果parent的高度确定,可以使用table标签的性质 示例

  3. 使用before,after和inline-bloack

示例

示例

  1. 将div模拟成表格的表现形式

示例

  1. 使用绝对定位+margin -50% 示例

  2. 绝对定位+ transform -50% 示例

  3. 绝对定位 + margin:auto 示例

  4. flex布局

示例