[分享]css3居中对其办法

 CSS3是一种强大的样式表语言，可以用来控制和美化网页的布局和样式。本文将介绍几种常用的CSS3居中对齐的方法。1. 水平居中对齐/ 使用flexbox布局实现水平居中对齐 / .parent { ...

 <！DOCTYPE html>

CSS3是一种强大的样式表语言，可以用来控制和美化网页的布局和样式。本文将介绍几种常用的CSS3居中对齐的方法。

1. 水平居中对齐

/* 使用flexbox布局实现水平居中对齐 */ 
		.parent {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		/* 使用text-align属性实现水平居中对齐 */ 
		.parent {
			text-align: center;
		}
		.child {
			display: inline-block;
		} 

2. 垂直居中对齐

/* 使用flexbox布局实现垂直居中对齐 */ 
		.parent {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 200px;
		}
		.child {
			align-self: center; 
		}

		/* 使用transform属性实现垂直居中对齐 */
		.parent { 
			position: relative; 
			height: 200px; 
		} 
		.child { 
			position: absolute; 
			top: 50%; 
			transform: translateY(-50%); 
		} 

3. 水平垂直居中对齐

/* 使用flexbox布局实现水平垂直居中对齐 */
		.parent { 
			display: flex; 
			justify-content: center; 
			align-items: center; 
			height: 200px; 
		} 
		.child { 
			align-self: center; 
		}

		/* 使用绝对定位和transform属性实现水平垂直居中对齐 */
		.parent { 
			position: relative; 
			height: 200px; 
		} 
		.child { 
			position: absolute; 
			top: 50%; 
			left: 50%; 
			transform: translate(-50%, -50%); 
		} 

以上就是CSS3居中对齐的常用方法，可以通过适当的选择和组合，实现不同样式的布局。要正确实现居中对齐，需要对HTML和CSS语法的掌握，同时也需要灵活运用各种布局工具和技术。