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

注：以下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垂直居中的方法大家可以参考本文下面的相关文章或者咨询我们的小编

赞 (0)

相关推荐

  • CSS List Grid Layout 图片垂直居中

    CSS List Grid Layout 图片垂直居中

    CSS List Grid View Layout body{ font-family:Arial; text-align:center; } p{ } .img-grid{ width:603px; margin:auto; overflow:hidden; position:relative; border:solid 20px #CCCCCC; } .img-grid h3{ padding:0 0 12px 0; background:#ccc; margin:0; font:norma

  • CSS解决未知高度垂直居中

    尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari等.,可将父级元素显示方式设定为TABLE(display: table;) ,内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中,但非标准浏览器是不支持的. 非标准浏览器只能在子元素里设距顶部50%,里面再套个元素距顶部

  • css实现文字垂直居中的代码第1/2页

    CSS中怎样设置才能使对象中的文字垂直居中于对象,这个问题也是捆扰很多朋友的难题.现在网上的很多代码都做不到浏览器兼容.我把网上有关的方法整理了一下,做了些改动,完全可以兼容各主流浏览器. 下面具体说一下在不同情况下垂直居中的方法. 一.一行文字垂直居中 看一下下面的代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

  • css支持标准的图片垂直居中

    css支持标准的图片垂直居中

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js+CSS 图片等比缩小并垂直居中实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • CSS解决未知高度垂直居中的问题

    除特别说明外,本站内容采用创作共用授权署名和非商业用途,请尊重劳动成果. 原文标题:Vertical Centering in CSS 副标题:Yuhu's Definitive Solution with Unknown Height 翻译:forestgan 尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari等.,可将父级元素显示方式设定为TA

  • 用css实现图片垂直居中的使用技巧

    题目的难点在于两点: 垂直居中: 图片是个置换元素,有些特殊的特性. 至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法: .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为

  • JS+CSS设置img在DIV中只显示Img垂直居中的部分

    JS+CSS设置img在DIV中只显示Img垂直居中的部分

    一个Div中显示Img,img的宽和Div相同,但高不固定,要求只显示Img垂直居中的部分. 示例: 原图: 代码实现: 复制代码 代码如下: <div style="width: 190px; height: 100px; overflow: hidden;"> <img src="http://beijing.timeoutcn.com/UserFiles/Images/2013-10-21/20131021104840077cover-22-1.jpg

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

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

    注:以下demo都只是针对现代浏览器所做,未兼容低版本的IE以及其他非主流浏览器. 实现css文字垂直居中的8种方法如下: 1.使用绝对定位和负外边距对块级元素进行垂直居中 css垂直居中效果: css垂直居中实现代码: 这个方法兼容性不错,但是有一个小缺点:必须提前知道被居中块级元素的尺寸,否则无法准确实现垂直居中. 2.使用绝对定位和transform 代码如下: 这种方法非常明显的好处就是不必提前知道被居中的元素的尺寸,因为transform中偏移的百分比就是相对于元素自身的尺寸而言. 3

  • 完美实现CSS垂直居中的11种方法

    完美实现CSS垂直居中的11种方法

    本人前端小白,正在做一个小程序开发的项目,css样式调整搞的头都大了.关于垂直居中,已尝试了文中的几个垂直居中css样式设置,已成功解决我的问题,故转载来备份下. CSS垂直居中11种实现方法分别如下: 1. 使用绝对定位和负外边距对块级元素进行垂直居中 html代码: <div id="box"> <div id="child">我是测试DIV</div> </div></pre> css代码: #box

  • Android获取文字高度的三种方法

    Android获取文字高度的三种方法

    前言 本文是对获取文字高度整理和总结,参考资料源自 statcoverflow的一个回答.具体参看下面的参考链接 获取文字高度的三个方法 paint.getTextBounds(String text, int start, int end, Rect bounds) paint.getFontMetrics() StaticLayout 1 paint.getTextBounds(String text, int start, int end, Rect bounds) 参数解释 text :

  • iOS改变UITextField占位文字颜色的三种方法

    iOS改变UITextField占位文字颜色的三种方法

    有时,UITextField自带的占位文字的颜色太浅或者不满足需求,所以需要修改,而UITextField没有直接的属性去修改占位文字的颜色,所以只能通过其他间接方式去修改. 例如:系统默认的占位文字颜色太浅 需要加深颜色,或者改变颜色 示例: 核心代码 方法一:通过attributedPlaceholder属性修改占位文字颜色 CGFloat viewWidth = self.view.bounds.size.width; CGFloat textFieldX = 50; CGFloat te

  • 提高CSS文件可维护性的五种方法总结

    1.分解你的样式 对于小项目,在写代码之前,按页面结构或页面内容将代码分为几块并给予注释.例如,可以分别将 全局样式.布局.字体样式.表单.评论和其他分为几个不同的块来继续工作. 而对于较大的工程,这样显然不会有什么效果.此时,就需要将样式分解到几个不同的样式表文件.下面的master stylesheet 就是这一方法的例子,它的工作主要是导入其他样式文件.使用这一方法不仅能优化样式结构,而且有利于减少一些不必要的服务器请求.而分解文件的方法就有许多种,master stylesheet 使用

  • 详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)

    在项目中经常会需要将一些接口的配合文件或者某些样式文件,分离出来单独打包,便于后期改动,这里我以css文件为例,介绍实现两种方法: 项目目录: 如上图所示,现在我需要将项目中的scBtn.css文件单独打包出来.在不做任何配置,直接打包出来的css文件是压缩合并成了一个了,如下图,当我想要改某一个css文件时就不行了. 方法一: 1.在bulid文件夹下建一个copy.js(这个js名称可以自定义) 代码如下: var fs = require('fs'); var path = require

  • 用css截取字符的几种方法详解（css排版隐藏溢出文本）

    方法一: 复制代码 代码如下: <div style="width:300px; overflow:hidden;  text-overflow:ellipsis; white-space:nowrap;"> 任意长度的字符串  </div> 说明:优点是内容可以为任何HTML元素,包括超链接和图片等,在IE6中还会在结尾自动显示省略号.缺点是必须指定宽度数值,并且宽度不能是百分数,否则在IE中会被认为是字符总长的百分比. 方法二: 复制代码 代码如下: <

  • JQuery显示、隐藏div的几种方法简明总结

    例子 复制代码 代码如下: $("#top_notice").css("display", "block");//第1种方法  //$("#top_notice").attr("style", "display:block;");//第2种方法  //$("#top_notice").show();//第3种方法 1.给元素换class,来实现隐藏div,前提是换的c

  • javascript 动态修改css样式方法汇总(四种方法)

    在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. 2.使用obj.style.cssTest来修改嵌入式的css. 3.使用obj.className来修改样式表的类名. 4.使用更改外联的css文件,从而改变元素的css 下面是一段html代码和css代码用来解释上面方法的区别的. CSS .style1{margin:10px auto ;b

随机推荐