CSS中的居中属性汇总

元素居中

当我们在CSS中想要实现元素居中时，可以使用以下几种常见的属性和技巧：

水平居中：

属性/技巧	水平居中
margin属性	margin: 0 auto;
flexbox布局	display: flex; justify-content: center;
text-align属性	text-align: center;

垂直居中：

属性/技巧	垂直居中
flexbox布局	display: flex; align-items: center;
line-height属性	line-height: 100px; vertical-align: middle;
position属性和transform属性	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

水平和垂直居中：

属性/技巧	水平和垂直居中
flexbox布局	display: flex; justify-content: center; align-items: center;
position属性和transform属性	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

文本居中

当我们在CSS中想要实现文本居中时，可以使用以下几种常见的属性和技巧：

水平居中：

属性/技巧	水平居中
text-align属性	text-align: center;

垂直居中：

属性/技巧	垂直居中
line-height属性	line-height: 100px; vertical-align: middle;

水平和垂直居中：

属性/技巧	水平和垂直居中
position属性和transform属性	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

• 水平居中：使用text-align: center;属性可以实现文本内容水平居中。

• 垂直居中：使用line-height: 100px; vertical-align: middle;属性可以实现文本内容垂直居中。

• 水平和垂直居中：使用position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);属性可以实现文本内容水平和垂直居中。

需要注意的是，不同的居中方式适用于不同的场景和元素类型。在实际应用中，可以根据具体情况选择合适的居中方式。另外，一些居中方式可能需要结合其他属性和技巧来实现更复杂的效果。