CSS元素垂直居中【内含vertical-align 与 line-height 属性详解】

frontoldman 发布于2019-08-29 12:23 / 3154人阅读

摘要：所以文字最终可以在整个中垂直居中显示。默认值为，即把元素放在父元素的基线上。万万没想到用两行代码就实现了只要给容器加上下面两条样式，就成功垂直居中了，都是多余了的。

请一定看到最后，flex太令人惊喜！ヾ(o◕∀◕)ﾉ

入个门

先来考虑这样一个问题：一行文字在一个固定高度的父div中怎样做到垂直居中？
我们都知道设置父div的line-height 等于它的height就可以了，像下面这样：

//html
我要垂直居中
//css
div {
  padding: 10px;
  height: 120px;
  line-height: 120px;
  font-size: 16px;
  background: pink;
}

效果如下图：

原理也很简单，line-height设置之后，文字的行高随之改变。来看一下设置line-height后具体的改变方式：

用ling-height的值减去文字font-size的值，即(120 - 16) = 104px，把它们的差 `104 / 2
= 52px` 分别加到文字的上方和下方。所以文字最终可以在整个div中垂直居中显示。

补充一点关于line-heihgt取值设置为百分比与设置为数字的不同：
假如当前元素font-size: 30px;我们想让行高为字体大小的3倍，就会设置line-height: 300%; 或 line-height: 3;，而假如这个元素有一个子元素，字体设置为font-size: 16px;。那么设置为300%的时候，子元素的行高为90px，即先计算，后继承；设置为3的时候，子元素的行高为48px，即先继承下来，再计算。

jsfillder中的例子

只有文字的时候我们用上述方法就可以实现垂直居中，那么如果div中包含图片和文字呢？

进个阶

也就是写这篇文章的实际问题来源：

一个div中包含两个子元素：左侧图片，右侧文字。已知图片高度远高于文字，怎样做到图片和文字都垂直居中呢？

如果依然使用上面设置line-height的方法：：

//html

  
  我要竖直居中

//css
div {
  padding: 10px;
  height: 160px;
  line-height: 160px;
  font-size: 16px;
  background: pink;
}
img {
  width: 70px;
  height: 70px;
}

效果却是这样的：

可以看到，只是文字居中了，图片的位置不是我们想要的。原因是：图片img有一个vertical-align属性，定义的是行内元素的基线与元素所在行的基线在垂直方向上的位置关系。默认值为baseline，即把元素放在父元素的基线上。

【注意：这个元素始终参照元素行高哦！所以如果是想让行高为14px的行内元素在一个50px高的div中垂直居中首先需要把该行内元素的line-height改为50px哦 ●ω●】

除了默认值，vertical-align还有以下几种常见取值，依次来试一下吧：

（其中，若设置百分比，参照物是line-height的值。）

img { vertical-align: top; } //    把元素的顶端与行中最高元素的顶端对齐

img { vertical-align: bottom; } //把元素的顶端与行中最低元素的顶端对齐

img { vertical-align: text-top; } //把元素的顶端与父元素字体的顶端对齐

img { vertical-align: text-bottom; } //把元素的底端与父元素字体的底端对齐

img { vertical-align: middle; } //把此元素放置在父元素的中部

可以发现，设置值为middle就是我们想要的结果。

另外，vertical-align还可以设置百分比和数值，当设置为负值时，图片会向下移动。

万万没想到：用flex两行代码就实现了 ●０●

只要给容器加上下面两条样式，就成功垂直居中了，line-height都是多余了的。

display: flex;
align-items: center;

完整代码是这样：

//html

  
  我要竖直居中


//css
div {
  display: flex;
  align-items: center;
  padding: 10px;
  height: 160px;
  font-size: 16px;
  background: pink;
}
img {
  width: 70px;
  height: 70px;
}

So easy !
附上阮老师写的flex教程：
Flex 布局教程：语法篇
Flex 布局教程：实例篇

参考资料：
http://www.w3school.com.cn/cs...
https://developer.mozilla.org...
http://stackoverflow.com/ques...
https://developer.mozilla.org...

服务器托管专线服务垂直居中实现垂直居中水平垂直居中文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111863.html

CSS元素垂直居中【内含vertical-align 与 line-height 属性详解】

摘要：所以文字最终可以在整个中垂直居中显示。默认值为，即把元素放在父元素的基线上。万万没想到用两行代码就实现了只要给容器加上下面两条样式，就成功垂直居中了，都是多余了的。请一定看到最后，flex太令人惊喜！ヾ(o◕∀◕)ﾉ入个门先来考虑这样一个问题：一行文字在一个固定高度的父div中怎样做到垂直居中？我们都知道设置父div的line-height 等于它的height就可以了，像下面...

Sanchi 2019-08-01 16:40 评论0 收藏0
CSS魔法堂：深入理解line-height和vertical-align

摘要：下的属性值详解以下内容均在中测试默认对齐方式这里作为参考系，而它的就是所要对齐的了。没有任何变化。那改变又如何呢为了让的清晰可见，特意添加一个的包裹着。前言一直听说line-height是指两行文本的基线间的距离，然后又说行高等于行距，最近还听说有个叫行间距的家伙，@张鑫旭还说line-height和vertical-align基情四射，贵圈真乱啊。。。。。。于是通过本篇来一探究竟...

avwu 2019-08-30 12:52 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

Hydrogen 2019-08-05 12:48 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
CSS 行内布局实践小结

摘要：相关内联格式上下文主要影响内布局的行盒模型，这是一个显示区域，根据块状容器内，每一行的多个内联元素都会共同生成一个行盒模型。前言通常情况下，要使元素排列在一行内，通常做法就是使用float，然后再清浮动。如下：showImg(https://segmentfault.com/img/bVmVua); 但是如果要使其垂直居中，则必须手动调整，蓝色或者绿色块的位置，比较繁琐。 ...

Taste 2019-08-28 18:13 评论0 收藏0