css居中的正确方式?水平居中設置我們在實際工作中常會遇到需要設置水平居中的場景，比如為了美觀，文章的标題一般都是水平居中顯示的，我來為大家科普一下關于css居中的正确方式?下面希望有你要的答案，我們一起來看看吧!
水平居中設置
我們在實際工作中常會遇到需要設置水平居中的場景，比如為了美觀，文章的标題一般都是水平居中顯示的。
這裡我們又得分兩種情況：行内元素 還是 塊狀元素 ，塊狀元素裡面又分為定寬塊狀元素，以及不定寬塊狀元素。今天我們先來了解一下
行内元素如果被設置元素為文本、圖片等行内元素時，水平居中是通過給父元素設置 text-align:center 來實現的。
定寬塊狀元素當被設置元素為 塊狀元素 時用 text-align：center 就不起作用了，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。
如果是定寬塊狀元素。(定寬塊狀元素：塊狀元素的寬度width為固定值。)
滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現居中的。
不定寬塊狀元素不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：
第一種做法：
為什麼選擇方法一加入table标簽? 是利用table标簽的長度自适應性---即不定義其長度也不默認父元素body的長度（table其長度根據其内文本長度決定），因此可以看做一個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。
第一步：為需要設置的居中的元素外面加入一個 table 标簽 ( 包括 <tbody>、<tr>、<td> )。
第二步：為這個 table 設置“左右 margin 居中”（這個和定寬塊狀元素的方法一樣）。
舉例如下：
html代碼：
<div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table> </div>
css代碼：
<style> table{ border:1px solid; margin:0 auto; } </style>
第二種做法：
改變塊級元素的 display 為 inline 類型（設置為 行内元素 顯示），然後使用 text-align:center 來實現居中效果。如下例子：
html代碼：
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>
css代碼：
<style> .container{ text-align:center; } /* margin:0;padding:0（消除文本與div邊框之間的間隙）*/ .container ul{ list-style:none; margin:0; padding:0; display:inline; } /* margin-right:8px（設置li文本之間的間隔）*/ .container li{ margin-right:8px; display:inline; } </style>
這種方法相比第一種方法的優勢是不用增加無語義标簽，但也存在着一些問題：它将塊狀元素的 display 類型改為 inline，變成了行内元素，所以少了一些功能，比如設定長度值。
方法三：
通過給父元素設置 float，然後給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現水平居中。
我們可以這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線将ul層的父層（div層）平均分為兩份，ul層的css代碼是将ul層的最左端與ul層的父層（div層）的平分線對齊；而li層的css代碼則是将li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現li層的居中。
代碼如下：
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>
css代碼：
<style> .container{ float:left; position:relative; left:50% } .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; } .container li{float:left;display:inline;margin-right:8px;} </style>
這三種方法使用得都非常廣泛，各有優缺點，具體選用哪種方法，可以視具體情況而定。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
