CSS怎么设置垂直居中？

推荐手册：CSS在线手册

	
		
		
		
	
	
		
css 垂直居中了--文本文字
	

效果图：

	
		
		
		
	
	
		
css 垂直居中--文本文字（弹性布局）
	

效果图：

1.Div垂直居中效果怎么实现
2.div标签：水平居中和垂直居中的实现（附代码）
相关视频推荐：
1.CSS视频教程-玉女心经版

二：css如何设置div盒子容器（块状元素）垂直居中

1.使用绝对定位和负外边距对块级元素进行垂直居中 (已知元素的高度)

如果我们知道元素的高度，可以这样来实现垂直居中：

	
		
		
		
	
	
		

		    
css 垂直居中
		
	

效果图：

这个方法兼容性不错，但是有一个小缺点：必须提前知道被居中块级元素的尺寸，否则无法准确实现垂直居中。

2. 使用绝对定位和transform（未知元素高度）

如果我们不知道元素的高度，那么就需要先将元素定位到容器的中心位置，然后使用 transform 的 translate 属性，将元素的中心和父容器的中心重合，从而实现垂直居中：

	
		
		
		
	
	
		

		    
css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中
		
	

效果图：

这种方法有一个非常明显的好处就是不必提前知道被居中元素的尺寸了，因为transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。

3. 绝对定位结合margin: auto

	
		
		
		
	
	
		

		    
css 垂直居中...
		
	

效果图：

这种方法需要先 把要垂直居中的元素相对于父元素绝对定位，top和bottom设为相等的值，不管设置成多少值，只要两者相等就行；然后再将要居中元素的margin设为auto，这样便可以实现垂直居中了。被居中元素的宽高也可以不设置，但不设置的话就必须是图片这种自身就包含尺寸的元素，否则无法实现。

4. 使用padding实现子元素的垂直居中

	
		
		
		
	
	
		

		    
css 垂直居中了
		
	

效果图：

这种实现方式非常简单，就是给父元素设置相等的上下内边距，则子元素自然是垂直居中的，当然这时候父元素是不能设置高度的，要让它自动被填充起来，除非设置了一个正好等于上内边距+子元素高度+下内边距的值，否则无法精确的垂直居中。这种方式看似没有什么技术含量，但其实在某些场景下也是非常好用的。

5. 使用flex布局

	
		
		
		
	
	
		

		    
css 垂直居中了--弹性布局
		
	

效果图：

　　flex-start:：交叉轴的起点对齐；
　　flex-end：交叉轴的终点对齐；
　　center：交叉轴的中点对齐；
　　baseline：项目第一行文字的基线对齐；
　　stretch（该值是默认值）：如果项目没有设置高度或者设为了auto，那么将占满整个容器的高度。

以上就是CSS怎么设置垂直居中？的详细内容，更多请关注 第一PHP社区 其它相关文章！