admin 管理员组

文章数量: 887021


2024年2月23日发(作者：budge)

div 文本垂直居中

div 文本垂直居中：

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

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

示例：

文本居中

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;

}