实现垂直水平居中的三种方法

实现垂直水平居中有多种方法,今天在这里介绍我自己认为较为简单的三种方法。
方法一:使用position定位
代码如下:



	
		
		实现垂直水平居中方法1
	
	
	
		
垂直水平居中

效果图片如下:
实现垂直水平居中的三种方法_第1张图片

方法二:使用position和transform



	
		
		实现水平垂直居中方法2
	
	
	
		
垂直水平居中

效果图如下:
实现垂直水平居中的三种方法_第2张图片

方法三:使用弹性盒子



	
		
		实现水平垂直居中方法3
	
	
	
		
垂直水平居中

实现的效果如下:
实现垂直水平居中的三种方法_第3张图片

今天就介绍到这里,如果喜欢,欢迎点赞关注,欢迎各位大佬探讨,今后会不定时更新一些好用的方法与大家分享。

你可能感兴趣的:(实用方法分享)