div文字垂直居中的方法有哪些？

首先我们应该知道文字的水平居中比较简单，行级元素设置其父元素的text-aligncenter，块级元素设置其本身的left和rightmargins为auto即可。但是div文字的垂直居中就不是那么简单了，所以我们就来具体看看div文字垂直居中的几种实现方法。

1、vertical-align属性让文字居中

vertical-align值有很多，常用的就是middle，bottom，text-bottom等，然而真实使用的时候，我们会发现这个属性“时灵时不灵”，有些情况下我们加了这个属性之后仍然不见img或者text有任何的变化。那是因为vertical-align只作用在inline-block或者inline，还有table-cell等元素内。

示例：

<divstyle="vertical-align:middle;display:table-cell;">
<imgsrc="02.jpg"alt="">
<p>文本居中</p></div>

2、利用行高（line-height）让文字垂直居中

如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可。

示例：

p{height:30px;line-height:30px;width:100px;overflow:hidden;
}

3、利用内边距（padding）让文字垂直居中

使用内边距让文字垂直居中和利用行高让文字垂直居中差不多，同样适合一行或几行文字垂直居中。

示例：

p{padding:20px0;
}

4、利用CSS3的transform来实现文字垂直居中

示例：

.center-vertical{position:relative;top:50%;transform:translateY(-50%);
}
.center-horizontal{position:relative;left:50%;transform:translateX(-50%);
}

5、利用flex布局实现文字垂直居中

示例：

.flex{/*flex布局*/display:flex;/*实现垂直居中*/align-items:center;/*实现水平居中*/justify-content:center;text-align:justify;width:200px;height:200px;background:#000;margin:0auto;color:#fff;
}

例子：

用vertical-align: middle; 无效的例子：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="bootstrap-4.6.0/dist/css/bootstrap.css"><style>.wrapper {width: 360px;height: 360px;border-width: 5px;border-style: solid;}/* border-width: 5px; *//* 无效果，没有改变边框大小的bootstrap类，不要border的bs类
.border {border: 1px solid #dee2e6 !important;
}
.border-primary {border-color: #007bff !important;
}*/.box {width: 100px;height: 100px;text-align: center;line-height: 100px;}</style>
</head><body class="p-5"><div class="wrapper border-primary text-white d-flex flex-wrap justify-content-around align-content-around "><div class="box box1 bg-primary">1</div><div class="box box2 bg-primary">2</div><div class="box box3 bg-primary">3</div><div class="box box4 bg-primary">4</div><div class="box box5 bg-primary">5</div><div class="box box6 bg-primary">6</div><div class="box box7 bg-primary">7</div><div class="box box8 bg-primary">8</div><div class="box box9 bg-primary">9</div></div>
</body></html>

reference：

http://www.divcss5.com/css3-style/c57297.shtml

div文字垂直居中的方法有哪些？相关推荐

让div中的p标签文字垂直居中的方法
设置父div标签的inline-height属性将inline-height属性的值设置成和div的高度一下就可以简单的实现div中p标签内的文字垂直居中示例如下: html代码 <foot ...
Div图片垂直居中的方法
<style> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-a ...
html中div文字垂直居中显示,CSS文本和div垂直居中方法总结
在样式布局中,我们经常碰到需要将元素居中.通过css实现元素的水平居中较为简单:对文本,只需要对其父级元素设置text-align: center;,而对div等块级元素,只需要设置其left和rig ...
图片与文字垂直居中的方法
块级元素,行内块元素及行内元素的特点 1.块级元素块元素会独自占据一整行,或者多行,可以任意设置其大小尺寸,是用于搭建网页布局的必须部分,使网页结构更加紧凑合理. 常用的块级元素有:<div& ...
IE9不支持CSS line-height的文字垂直居中解决方法
IE9不支持line-height原因:中文ie9不支持英文字体相信大家在IE9看见自己使用line-height设置垂直居中文字不能垂直居中,这是与你设置字体有关,通常大家习惯设置font-fam ...
img在div中垂直居中的方法
html中 <div><img src="" /> </div> 方法: 1.将display设置成table-cell,然后水平居中设置tex ...
多行文字垂直居中的方法
<body><div><span>多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多 ...
高度不固定的div文字垂直居中
垂直居中:1653align-items:center; display: -webkit-flex; 水平居中:justify-content:center; display: -webkit-fl ...
实现div元素和文字水平及垂直居中的方法（超简单，适应各种场合）
实现实现div元素和文字水平及垂直居中的方法如下: div元素水平居中:style="margin:0 auto" div元素垂直居中:style="padding: ( ...

div文字垂直居中的方法有哪些？

div文字垂直居中的方法有哪些？相关推荐

最新文章

热门文章