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>效果图：
以上就是css水平居中怎么设置？的详细内容，更多请关注0133技术站其它相关文章！
