# 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.