今天申请博客通过了,给大家讲讲我所看到过的纯css实现垂直居中的各种方法。为什么要把它作为第一篇文章呢?因为这是我刚开始接触前端学到的对我最有用的知识,希望大家也可以从中获益! 在CSS中实现水平居中是非常简单的,行内元素设置其父元素的text-align:center,块级元 ...
今天申请博客通过了,给大家讲讲我所看到过的纯css实现垂直居中的各种方法。为什么要把它作为第一篇文章呢?因为这是我刚开始接触前端学到的对我最有用的知识,希望大家也可以从中获益!
在CSS中实现水平居中是非常简单的,行内元素设置其父元素的text-align:center,块级元素就对其自身应用magrin:auto。然而,实现垂直居中就有点麻烦了,首先它是极其常见的需求,看似简单,在实践中,往往难如登天,当设计尺寸不固定时尤其如此。以下是我找到的一些方法:
方法一:行高line-height
(1)单行文本居中
HTML代码
1 <div class="box1">2 <div class="box2">垂直居中</div>3 </div>
原标题:纯CSS实现垂直居中的7种方法
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。