logo
  • 教程列表
  • SO官方文档
  • 定心
    • 使用 Flexbox
    • 使用 CSS 转换
    • 使用 margin 0 auto
    • 使用 text-align
    • 使用绝对位置
    • 使用 calc()
    • 使用 3 行代码垂直对齐任何内容
    • 使用行高
    • 鬼元素技术(Micha Czernows hack)
    • 以另一个项目为中心
    • 垂直对齐 div 内的图像
    • 垂直和水平居中,无需担心高度或宽度
    • 以固定尺寸居中
    • 垂直对齐动态高度元素
    • 使用表格布局进行水平和垂直居中
  1. StackOverflow 文档
  2. CSS 教程
  3. 定心
  4. 使用 3 行代码垂直对齐任何内容

使用 3 行代码垂直对齐任何内容

Created: November-22, 2018

IE11 +支持

查看结果

使用这 3 条线垂直对齐几乎所有东西。只需确保你应用代码的 div / image 具有高度的父级。

CSS

div.vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

HTML

<div class="vertical">Vertical aligned text!</div>
  • 使用行高
  • 使用 calc()

Copyright © 2018. All right reserved

tastones.com 备案号:鲁ICP备18045372号-1

  • 关于我们
  • 免责声明