CSS 水平垂直居中

ZGuangJu 9/23/2018 前端基础CSSCSS3

# CSS垂直居中

1、ling-height

适用场景：单行文字垂直居中，按钮、下拉框、导航栏

将单行文字的行高设定后，文字会位于行高的垂直中间位置。

<div class="content">Long time no see.</div>

.content {
    width: 400px;
    background: #ccc;
    line-height: 100px;
    margin: auto;
}

2、line-height+inline-block

适用场景：多对象的垂直居中

# 使用`line-height`做垂直居中

See the Pen 使用line-height做垂直居中 by whjin (@whjin) on CodePen.

# 使用`line-height`+`inline-block`做多行文字的垂直居中

See the Pen 使用CSS line-height + inline-block 做多行文字的垂直置中 by whjin (@whjin) on CodePen.

# 使用`:before`+`inline-block`做垂直居中

See the Pen 使用line-height+inline-block做多行文字的垂直居中 by whjin (@whjin) on CodePen.

# 使用`padding`做垂直居中

See the Pen 使用padding做垂直居中 by whjin (@whjin) on CodePen.

# 使用`absolute`+`margin`负值做垂直居中

See the Pen 使用absolute+margin负值做垂直居中 by whjin (@whjin) on CodePen.

# 使用`absolute`+`margin auto`做垂直居中

See the Pen 使用absolute+margin auto做垂直居中 by whjin (@whjin) on CodePen.

# 使用`absolute`+`translate`做垂直居中

See the Pen 使用absolute+translate做垂直居中 by whjin (@whjin) on CodePen.

# 使用`relative`+`translateY`做垂直居中

See the Pen 使用relative+translateY做垂直居中 by whjin (@whjin) on CodePen.

# 使用`table`做垂直居中

See the Pen 使用table做垂直居中 by whjin (@whjin) on CodePen.

# 使用`display: table-cell`做垂直居中

See the Pen 使用display: table-cell做垂直居中 by whjin (@whjin) on CodePen.

# 使用`flex`+`align-items`做垂直居中

See the Pen 使用flex+align-items做垂直居中 by whjin (@whjin) on CodePen.

# 使用`flex`+`:before`+`flex-grow`做垂直居中

See the Pen 使用flex+:before+flex-grow做垂直居中 by whjin (@whjin) on CodePen.

# 使用`flex`+`margin`做垂直居中

See the Pen 使用flex+margin做垂直居中 by whjin (@whjin) on CodePen.

# 使用`Flex`+`align-self`做垂直置中

See the Pen 使用Flex+align-self做垂直置中 by whjin (@whjin) on CodePen.

# 使用`flex`+`align-content`做垂直居中

See the Pen 使用flex+align-content做垂直居中 by whjin (@whjin) on CodePen.

# 使用`grid`+`template`做垂直居中

See the Pen 使用grid+template做垂直居中 by whjin (@whjin) on CodePen.

# 使用`grid`+`align-items`做垂直居中

See the Pen 使用grid+align-items做垂直居中 by whjin (@whjin) on CodePen.

# 使用`grid`+`align-content`做垂直居中

See the Pen 使用grid+align-content做垂直居中 by whjin (@whjin) on CodePen.

# 使用`grid`+`align-self`做垂直居中

See the Pen 使用grid+align-self做垂直居中 by whjin (@whjin) on CodePen.

# 使用`grid`+`place-items`做垂直居中

See the Pen 使用grid+place-items做垂直居中 by whjin (@whjin) on CodePen.

# 使用`grid`+`place-content`做垂直居中

See the Pen 使用grid+place-content做垂直居中 by whjin (@whjin) on CodePen.

# 使用`grid`+`margin`做垂直居中

See the Pen 使用grid+margin做垂直居中 by whjin (@whjin) on CodePen.

# 使用`calc`做垂直居中

See the Pen 使用calc做垂直居中 by whjin (@whjin) on CodePen.

# 使用`writing-mode`做垂直居中

See the Pen 使用writing-mode做垂直居中 by whjin (@whjin) on CodePen.

# 左图右文版面，文字做垂直居中

See the Pen 左图右文版面，文字做垂直居中-1 by whjin (@whjin) on CodePen.

See the Pen 左图右文版面，文字做垂直居中-2 by whjin (@whjin) on CodePen.

# CSS 水平垂直居中

有一个 div#wrapper 元素，高、宽度都未知。它其中有一个宽高都为 100px 的 div#box 元素，请你完成 CSS，使得 div#box 在 div#wrapper 内水平、垂直方向居中。

常规答案

See the Pen 水平垂直居中 by whjin (@whjin) on CodePen.

方法一

See the Pen 水平垂直居中1 by whjin (@whjin) on CodePen.

方法二

See the Pen 水平垂直居中2 by whjin (@whjin) on CodePen.

方法三

See the Pen 水平垂直居中3 by whjin (@whjin) on CodePen.

# 本页源码例子

使用的在线编辑器地址 (opens new window)

其他在线编辑器 w3schools (opens new window)

其他在线编辑器 notion (opens new window)

其他在线编辑器 animpen (opens new window)

在线编辑代码 codemirror (opens new window)

 <!-- 使用`line-height`做垂直居中 -->

<p class="codepen" data-height="300" data-theme-id="0" data-default-tab="result" data-user="whjin" data-slug-hash="EMdevR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="使用line-height做垂直居中">
  <span>See the Pen <a href="https://codepen.io/whjin/pen/EMdevR/">
  使用line-height做垂直居中</a> by whjin (<a href="https://codepen.io/whjin">@whjin</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

CSS 居中和垂直水平居中(7) CSS 媒体查询

ZGuangJu'S NoteBook

Choose mode

CSS 水平垂直居中

CSS 水平垂直居中

# CSS垂直居中

# 使用`line-height`做垂直居中

# 使用`line-height`+`inline-block`做多行文字的垂直居中

# 使用`:before`+`inline-block`做垂直居中

# 使用`padding`做垂直居中

# 使用`absolute`+`margin`负值做垂直居中

# 使用`absolute`+`margin auto`做垂直居中

# 使用`absolute`+`translate`做垂直居中

# 使用`relative`+`translateY`做垂直居中

# 使用`table`做垂直居中

# 使用`display: table-cell`做垂直居中

# 使用`flex`+`align-items`做垂直居中

# 使用`flex`+`:before`+`flex-grow`做垂直居中

# 使用`flex`+`margin`做垂直居中

# 使用`Flex`+`align-self`做垂直置中

# 使用`flex`+`align-content`做垂直居中

# 使用`grid`+`template`做垂直居中

# 使用`grid`+`align-items`做垂直居中

# 使用`grid`+`align-content`做垂直居中

# 使用`grid`+`align-self`做垂直居中

# 使用`grid`+`place-items`做垂直居中

# 使用`grid`+`place-content`做垂直居中

# 使用`grid`+`margin`做垂直居中

# 使用`calc`做垂直居中

# 使用`writing-mode`做垂直居中

# 左图右文版面，文字做垂直居中

# CSS 水平垂直居中

# 本页源码例子

ZGuangJu'S NoteBook

CSS 水平垂直居中

CSS 水平垂直居中

# CSS垂直居中

# 使用line-height做垂直居中

# 使用line-height+inline-block做多行文字的垂直居中

# 使用:before+inline-block做垂直居中

# 使用padding做垂直居中

# 使用absolute+margin负值做垂直居中

# 使用absolute+margin auto做垂直居中

# 使用absolute+translate做垂直居中

# 使用relative+translateY做垂直居中

# 使用table做垂直居中

# 使用display: table-cell做垂直居中

# 使用flex+align-items做垂直居中

# 使用flex+:before+flex-grow做垂直居中

# 使用flex+margin做垂直居中

# 使用Flex+align-self做垂直置中

# 使用flex+align-content做垂直居中

# 使用grid+template做垂直居中

# 使用grid+align-items做垂直居中

# 使用grid+align-content做垂直居中

# 使用grid+align-self做垂直居中

# 使用grid+place-items做垂直居中

# 使用grid+place-content做垂直居中

# 使用grid+margin做垂直居中

# 使用calc做垂直居中

# 使用writing-mode做垂直居中

# 左图右文版面，文字做垂直居中

# CSS 水平垂直居中

# 本页源码例子

# 使用`line-height`做垂直居中

# 使用`line-height`+`inline-block`做多行文字的垂直居中

# 使用`:before`+`inline-block`做垂直居中

# 使用`padding`做垂直居中

# 使用`absolute`+`margin`负值做垂直居中

# 使用`absolute`+`margin auto`做垂直居中

# 使用`absolute`+`translate`做垂直居中

# 使用`relative`+`translateY`做垂直居中

# 使用`table`做垂直居中

# 使用`display: table-cell`做垂直居中

# 使用`flex`+`align-items`做垂直居中

# 使用`flex`+`:before`+`flex-grow`做垂直居中

# 使用`flex`+`margin`做垂直居中

# 使用`Flex`+`align-self`做垂直置中

# 使用`flex`+`align-content`做垂直居中

# 使用`grid`+`template`做垂直居中

# 使用`grid`+`align-items`做垂直居中

# 使用`grid`+`align-content`做垂直居中

# 使用`grid`+`align-self`做垂直居中

# 使用`grid`+`place-items`做垂直居中

# 使用`grid`+`place-content`做垂直居中

# 使用`grid`+`margin`做垂直居中

# 使用`calc`做垂直居中

# 使用`writing-mode`做垂直居中