你的位置:首页 > 软件开发 > 网页设计 > 纯CSS实现垂直居中的7种方法

纯CSS实现垂直居中的7种方法

发布时间:2017-03-22 00:00:34
今天申请博客通过了,给大家讲讲我所看到过的纯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

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。