• 售前

  • 售后

热门帖子
入门百科

实现css文字垂直居中的8种方法

[复制链接]
刘冠华 显示全部楼层 发表于 2021-8-16 11:49:12 |阅读模式 打印 上一主题 下一主题
注:以下demo都只是针对现代欣赏器所做,未兼容低版本的IE以及其他非主流欣赏器。
实现css文字垂直居中的8种方法如下:

1.使用绝对定位和负外边距对块级元素进行垂直居中

css垂直居中结果:

css垂直居中实现代码:

这个方法兼容性不错,但是有一个小缺点:必须提前知道被居中块级元素的尺寸,否则无法准确实现垂直居中。
2.使用绝对定位和transform

代码如下:

这种方法非常显着的利益就是不必提前知道被居中的元素的尺寸,由于transform中偏移的百分比就是相对于元素自身的尺寸而言。
3.绝对定位结合margin:auto


这种方式的两个焦点是:把要垂直居中的元素相对于父元素绝对定位,top和bottom设置为相等的值,我这里设置成0了,固然也可以设置为99999px大概-99999px,无论什么,只要两者相等就行。这逐一步做完之后再将要居中的元素的margin设为auto,如许就可以实现垂直居中了。
被居中元素的宽度也可以不设置,但是不设置的话,就必须是图片这种自身就包含尺寸的元素,否则无法实现。
4.使用padding实现子元素的垂直居中


这种方式非常简单,就是给父元素设置相等的上下内边距,则子元素天然是垂直居中的,天然这个时间父元素是不能设置高度的,要让它主动被填充起来,除非设置了一个正好即是上内边距+子元素高度+下内边距的值,否则无法精确地垂直居中。
这种方式看似没有什么技能含量,但着实在某种场景下也好坏常好用的。
5.使用flex结构


flex结构(弹性结构/伸缩结构)里门道颇多,这里先针对用到的东西简单说一下,想深入学习的小搭档可以去看阮一峰老师的博客。
flex也就是flexible,意思为机动的,柔韧的,易弯曲的。
元素可以通过设置display:flex;将其指定为flex结构的容器,指定好了容器之后再为其添加align-items属性,该属性界说项目在交叉轴(这里是纵向周)上的对齐方式,可能的取值有五种,分别如下:
flex-start:交叉轴的出发点对齐;flex-end:交叉轴的重点对齐;
center:交叉轴的重点对齐;baseline项目第一行文字的基线对齐;
strech(该值是默认值):假如项目没有设置高度大概设置为auto,那么将占满整个容器的高度。
6.弹性结构


这种方式也是给父元素设置display:flex,设置好之后改变主轴的flex-direction:column,该属性可能的取值有四个,分别如下:
row(该值为默认值):主轴为程度方向,出发点在左端;
row-reverse,主轴是程度方向,出发点在有端;
column主轴为垂直方向,出发点在上沿;
column-reverse:主轴为垂直方向,出发点在下沿。
justify-content属性界说了项目在主轴上的对齐方式,可能取的值有五个,分别如下(不外具体的对齐方式与主轴的方向有关,以下的值都是假设主轴为从左到右的):
flex-staart(该值是默认值):左对齐;
flex-end:右对齐;
center:居中对齐;
space-between:两头对齐,各个项目之间的隔断均对齐;
space-around:各个项目两侧的隔断相等。
7.另有一种在前面已经见到过许多次的方式就是使用line-height对单行文本进行垂直居中


这里有一个小坑需要各人留意:line-height(行高)的值不能设为100%;我们来看看官网文档中给出的关于line-height取值为百分比时间的形貌:基于当前字体尺寸的百分比行间距,以是各人就明白了,假如是百分比是相对于字体尺寸来讲的。
8.使用display和vertical-align对容器里的文字进行垂直居中


这里关于vertical-align啰嗦两句:vertical-align属性只对拥有valign特性的html元素起作用,比方表格元素中的<td><th>等等,而像<div><span>如许的元素是不可的。
valign属性规定单元格中内容的垂直分列方式,语法:<tdvalign="value">,value的可能取值有四种:
top:对内容进行上对齐
middle:对内容进行居中对齐
bottom:对内容进行下对齐
baseline:基线对齐
关于baseline值:基线是一条假造的线。在一行文本中,大多数字母以基线为基准。baseline值设置行中的所有表格数据都分享相同的基线。该值的结果经常与bottom值相同。不外,假如文本的字号各不相同,那么baseline的结果会更好。
更多关于CSS垂直居中的方法各人可以参考本文下面的相关文章大概咨询我们的小编

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作