logo
  • 教程列表
  • SO官方文檔
  • 垂直居中
    • 以顯示錶為中心
    • 以變​​換為中心
    • 以 Flexbox 為中心
    • 使用線高度居中文字
    • 以絕對位置為中心
    • 以偽元素為中心
  1. StackOverflow 文件
  2. CSS 教程
  3. 垂直居中
  4. 以顯示錶為中心

以顯示錶為中心

Created: November-22, 2018

HTML:

<div class="wrapper">
    <div class="outer">
        <div class="inner">
            centered
        </div>
    </div>
</div>

CSS:

.wrapper {
  height: 600px;
  text-align: center;
}
.outer {
  display: table;
  height: 100%;
  width: 100%;
}
.outer .inner {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
  • 以變​​換為中心
  • 垂直居中

Copyright © 2018. All right reserved

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

  • 關於本站
  • 免責聲明