這篇文章主要介紹了css中如何設置水平居中效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
css設置水平居中的方法：1、使用“text-align: center;”樣式，可對塊級元素（父元素）中的行內元素進行水平居中；2、使用“margin: 0 auto;”樣式，可對塊級元素（父元素）中具有固定寬度的塊級元素進行水平居中。
方法1：使用text-align屬性
直接給父元素設置 text-align: center;樣式，可以將塊級元素（父元素）中的行內元素進行水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#father {
width: 300px;
height: 100px;
background: palevioletred;
text-align: center;
}
</style>
<div id="father">
我是測試文本！
</div>
</html>效果圖：
說明：
該種方法僅對文字、圖片、按鈕等行內元素有效（display屬性設置為inline或inline-block的）進行水平居中
方法2：使用margin屬性
給需要居中的子元素設置margin: 0 auto; 樣式，可以將塊級元素（父元素）中具有固定寬度的塊級元素進行水平居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#father {
width: 300px;
height: 100px;
background-color: palevioletred;
}
#son {
width: 100px;
height: 50px;
background-color: pink;
margin: 0 auto;
}
</style>
<div id="father">
<div id="son">我是塊級元素</div>
</div>
</html>效果圖：
說明：
該方法僅能水平居中，且對浮動元素定位無效。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“css中如何設置水平居中效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
