垂直居中
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做垂直居中
使用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做垂直居中
左图右文版面，文字做垂直居中
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。