23种CSS垂直居中技巧

网页CSS的垂直居中需求始终没有停过，而其困难度也始终没有让人轻松过，经过了每位开发先烈的研究后，据说CSS的垂直居中技巧已达到近十种之多，但始终鲜为人知，部分公司甚至将CSS的垂直居中技巧当成面试题，其重要性可见一斑，经过了Amos通灵了一下之后把垂直居中的写法扩展到了23种，今天就让Amos带着大家轻松的了解一下CSS的垂直居中的方式吧。

1、Line-height

适用情景：单行文字垂直居中技巧

这个方式应该是最多人知道的了，常见于单行文字的应用，像是按钮这一类对象，或者是下拉框、导航此类元素最常见到的方式了。此方式的原理是在于将单行文字的行高设定后，文字会位于行高的垂直中间位置，利用此原理就能轻松达成垂直居中的需求了。

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

2、Line-height + inline-block

适用情景：多对象的垂直居中技巧

既然可以使用第一种方式对行元素达成垂直居中的话，当然没有理由不能做到多行啊~但是你需要将多个元素或多行元素当成一个行元素来看待，所以我们必须要将这些数据多包一层，并将其设定为inline-block，并在该inline-block对象的外层对象使用inline-block来代替height的设置，如此便可以达到垂直居中的目的了，从使你的数据是包含了标题跟内容在内也可以正常的垂直居中了。

 立马来看Amos实际完成的  CSS3精美相册效果  效果吧！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！