多行文字垂直居中实现--四种方法

1. 将父元素设置为块级表格来显示display:table;子元素设置为表格单元格来显示，设置vertical-align: middle。

<div style="margin: 20px auto;width: 400px;height: 400px;background-color: aqua;overflow: hidden;"><div style="display: table;margin: 100px auto;width: 200px;height: 200px;text-align: center;background-color: antiquewhite;"><span style="display: table-cell;vertical-align: middle;">你好你好你好你好你好你好你好你好你好你好你好</span></div></div>

2. 先对父元素设置高度和行高（相等）即height=line-height,子元素设置为行内块元素display:inline-block,设置vertical-align: middle,自定义line-height 属性的值如18px；

<div style="margin: 20px auto;width: 400px;height: 400px;background-color: aqua;overflow: hidden;"><div style="display: table;margin: 100px auto;width: 200px;height: 200px;text-align: center;background-color: antiquewhite;"><span style="display: table-cell;vertical-align: middle;">你好你好你好你好你好你好你好你好你好你好你好</span></div></div>

3. 先将子元素设置为行内块元素display:inline-block，再对子元素设置相对定位position:relative，之后利用top:50%和transform:translateY(-50%)设置平移；

<div style="margin: 20px auto;width: 400px;height: 400px;background-color: rgb(254, 164, 181);overflow: hidden;"><div style="margin: 100px auto;width: 200px;height: 200px;text-align: center;background-color: antiquewhite;"><span style="display: inline-block;position: relative;top: 50%;transform: translateY(-50%);">你好你好你好你好你好你好你好你好你好你好你好</span></div></div>

4. 利用flex弹性布局，将父元素设置为弹性盒子，并设置父元素align-items: center，即定义flex子项在flex容器侧轴方向上的对齐方式为center。

  <div style="margin: 20px auto;width: 400px;height: 400px;background-color: rgb(254, 229, 164);overflow: hidden;"><div style="display: flex;align-items: center;margin: 100px auto;width: 200px;height: 200px;text-align: center;background-color: antiquewhite;"><span>你好你好你好你好你好你好你好你好你好你好你好</span></div></div>

效果：

多行文字垂直居中实现--四种方法相关推荐

CSS多行文字垂直居中的两种方法
<div class="middle-box"><div class="middle-inner"><p><span ...
java文本框字体垂直居中_实现css文字垂直居中的8种方法
注:以下demo都只是针对现代浏览器所做,未兼容低版本的IE以及其他非主流浏览器. 实现css文字垂直居中的8种方法如下: 1.使用绝对定位和负外边距对块级元素进行垂直居中 css垂直居中效果: cs ...
CSS：实现多行文本垂直居中的四种方法
对于单行文本,可以使用行高等于高度来设置垂直居中,但多行文本不适用. 实现多行文本垂直居中的四种方法 1. 利用表格元素table+vertical-align实现将父元素设置为块级表格来显示,再将 ...
CSS总结div中的内容垂直居中的四种方法
一.行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
excel多列多行堆叠成多列一行_「Excel技巧」Excel快速实现将一行转为多行多列的四种方法...
今天来说说在Excel中,将表格里的一列转换为多行多列的几种方法. 例如,以下表格,是一个行业分类表,都放在同一列中.现我们准备把它转为多列. 表格里数据除掉标题行行,总共有60列数据,干脆我们就给它 ...
实现css文字垂直居中的8种方法
CSS可以轻易实现文字的水平居中,但有时我们需要文字垂直居中,除了表格可以实现这种CSS文字垂直居中以外,还有其它几种方法可以做到 https://www.jb51.net/article/17825 ...
图片怎么转换成文字？这四种方法分分钟完成转换
怎么将图片转换成文字呢?通过图片转文字的方式,文本内容更容易编辑和搜索.传统上,我们需要手动输入文本内容,这是一项耗时且费力的工作,但通过图片转文字,我们可以自动将图片中的文字提取出来,然后进行编辑和 ...
HBase统计表行数(RowCount)的四种方法
背景: 对于其他数据存储系统来说,统计表的行数是再基本不过的操作了,一般实现都非常简单:但对于HBase这种key-value存储结构的列式数据库,统计 RowCount 的方法却有好几种不同的花样, ...
浮层java_css保持浮层水平垂直居中的四种方法
以以上代码为例: 1,flex方法 .parent{ position: absolute; background-color: #eee; width: 100%; height: 100%; } ...

多行文字垂直居中实现--四种方法

1. 将父元素设置为块级表格来显示display:table;子元素设置为表格单元格来显示，设置vertical-align: middle。

2. 先对父元素设置高度和行高（相等）即height=line-height,子元素设置为行内块元素display:inline-block,设置vertical-align: middle,自定义line-height 属性的值如18px；

3. 先将子元素设置为行内块元素display:inline-block，再对子元素设置相对定位position:relative，之后利用top:50%和transform:translateY(-50%)设置平移；

4. 利用flex弹性布局，将父元素设置为弹性盒子，并设置父元素align-items: center，即定义flex子项在flex容器侧轴方向上的对齐方式为center。

效果：

多行文字垂直居中实现--四种方法相关推荐

最新文章

热门文章

多行文字垂直居中实现--四种方法

1. 将父元素设置为块级表格来显示display:table;子元素设置为表格单元格 来显示，设置vertical-align: middle。

2. 先对父元素设置高度和行高（相等）即height=line-height,子元素设置 为行内块元素display:inline-block,设置vertical-align: middle,自定义line-height 属性的值如18px；

3. 先将子元素设置为行内块元素display:inline-block，再对子元素设置相对 定位position:relative，之后利用top:50%和transform:translateY(-50%)设置 平移；

4. 利用flex弹性布局，将父元素设置为弹性盒子，并设置父元素align-items: center，即定义flex子项在flex容器侧轴方向上的对齐方式为center。

效果：

多行文字垂直居中实现--四种方法相关推荐

最新文章

热门文章

1. 将父元素设置为块级表格来显示display:table;子元素设置为表格单元格来显示，设置vertical-align: middle。

2. 先对父元素设置高度和行高（相等）即height=line-height,子元素设置为行内块元素display:inline-block,设置vertical-align: middle,自定义line-height 属性的值如18px；

3. 先将子元素设置为行内块元素display:inline-block，再对子元素设置相对定位position:relative，之后利用top:50%和transform:translateY(-50%)设置平移；