css水平居中怎么设置？

css水平居中怎么设置？下面本篇文章就来给大家介绍一下使用css设置水平居中的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1、text-align:center —— 水平居中

使用text-align: center;可以将块级元素（父元素）中的行内元素进行水平居中；直接给父元素设置 text-align: center; 即可。

仅对文字、图片、按钮等行内元素有效（display设置为inline或inline-block等）进行水平居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			#father {
				width: 300px;
				height: 100px;
				background-color: skyblue;
				text-align: center;
			}
		</style>

		<div id="father">
			我是测试文本！
		</div>

</html>

效果图：

2、margin：0 auto； —— 水平居中

使用margin: 0 auto; 可以将块级元素（父元素）中具有固定宽度的块级元素进行水平居中；此时需要谁居中，就给其设置 margin: 0 auto; （作用：使盒子自己居中）。

仅水平居中，且对浮动元素定位无效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			#father {
				width: 300px;
				height: 100px;
				background-color: skyblue;
			}
			
			#son {
				width: 100px;
				height: 50px;
				background-color: pink;
				margin: 0 auto;
			}
		</style>

		<div id="father">
			<div id="son">我是块级元素</div>
		</div>

</html>

效果图：

3、弹性布局 —— 水平居中

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			#father {
				width: 300px;
				height: 100px;
				background-color: skyblue;
				display: flex;
				justify-content: center;
			}
			
			#son {
				width: 100px;
				height: 50px;
				background-color: palegoldenrod;
			}
		</style>

		<div id="father">
			<div id="son">我是块级元素</div>
		</div>
</html>

效果图：