CSS line-heigh与垂直居中

我们都知道，在CSS中，要想实现字体在父元素中垂直居中直接让line-height等于height即可。可是为什么这样设置就可以让文字垂直居中呢？要弄懂这个问题需要先理解以下几个概念。

1、行高

行高指一行文字的基线到下一行文字的基线之间这一段距离

行高的高度 = 字体高度 + 上间距 + 下间距

2 、行框

在浏览器中，会将给每一段文本生成一个行框，行框的高度就是行高。
这个行框是不可见的。浏览器会把在生成一个字体时会把行框分为三部分。字体本身的高度和上下两部分高度即行高−字高2\frac{行高-字高}{2}2行高−字高。之后浏览器会将这三部分从上到下依次向父元素盒子填充。

3、行框生成过程

例如，设置字体大小 font-size=16px 行高 line-height=200px。那么200−12=184px200-12=184px200−12=184px。所以上下两部分各自分得92px92px92px

4、文字垂直居中实现

设置父盒子的height=200px。则行框的高=父元素的高=行高=200px，依次把行框三部分从上到下填充父盒子可以正好填满。由于上部分和下部分都等于行高−字高2\frac{行高-字高}{2}2行高−字高。所以就有了垂直居中的效果

这就是设置line-height==height时实现垂直居中的原理

CSS line-height与垂直居中相关推荐

CSS中实现水平/垂直居中
CSS中实现水平/垂直居中在CSS中实现水平居中相对简单,但是却没有一个明确的属性表示这是实现垂直居中的,这就导致垂直居中的实现相对初学者来说难上许多.但是在实际的开发中垂直居中的需求常常出现,例如 ...
html盒子嵌套居中,css在盒子中垂直居中和固定居中
顶部固定居中我是固定的 .w960{ width: 960px; margin:0 auto; } .fixed{ position: absolute; top:0; left: 0; right ...
css如何设置文本垂直居中显示,css中怎么设置文本居中？css文本垂直居中的设置方法...
在网页设计的过程中,有时候可能为了布局美观可能需要让文本居中,那么,怎么设置文本居中呢?本篇文章将给大家介绍关于css设置文本垂直居中的方法. 首先我们要知道通过css实现元素的水平居中较为简单:对文 ...
【CSS基础】文字垂直居中
文字垂直居中 1.高度为百分比,line-height 不知道设置具体的数值的情况,利用伪元素进行居中 HTML <div class="father"><div ...
CSS实现水平居中与垂直居中
CSS实现水平居中与垂直居中一.水平居中 1. 必备知识 1.1 text-align 属性 1.2 display 属性 1.3 margin 属性 1.4 position 属性 1.5 tra ...
CSS的水平居中、垂直居中和水平垂直居中
CSS的水平居中.垂直居中和水平垂直居中 1.水平居中水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中这里行内元素是指文本text.图像img.按钮超链接等,只需给父元素 ...
CSS实现元素水平垂直居中的各种方法
关于 CSS 如何将元素进行水平垂直居中的几种常用方法前言在设计网页页面的过程中,总会有将元素或者文字进行水平或者垂直居中的要求,各种CSS样式调整,搞的头都大了.这里将会介绍 CSS 中几种常用 ...
html5怎么把图片垂直居中,css如何让img垂直居中？
css如何让img居中显示?对于刚刚css入门的新手可能还不是很熟悉,下面我们来总结一下css如何让img垂直居中? 一.使用flex实现垂直居中利用 display: flex;align-ite ...
css数字固定居中怎么使用,css在盒子中垂直居中和固定居中
顶部固定居中我是固定的 .w960{ width: 960px; margin:0 auto; } .fixed{ position: absolute; top:0; left: 0; right ...
[css] body{height:100%}和html,body{height:100%}有什么区别？为什么html要设置height:100%呢，html不就是整个窗口吗？
[css] body{height:100%}和html,body{height:100%}有什么区别?为什么html要设置height:100%呢,html不就是整个窗口吗? html是body的父 ...

CSS line-height与垂直居中