三種情況：1、行內元素（文本、圖片等） 給父元素設置text-align：center;來實現 2、定寬塊狀元素 3、不定寬塊狀元素（3種方法） （1）為需要水平居中的元素加table標簽；然後為table設置樣式： table{margin:0 auto;} （2）將塊級元素轉換為內聯元素（eg：
三種情況：1、行內元素（文本、圖片等）
給父元素設置text-align：center;來實現
2、定寬塊狀元素
<style> div{ border:1px solid blue; width:350px; height:20px; margin:20px auto; /*水平居中：上下方向有20px的margin值，左右方向的等margin值由瀏覽器自動設置*/ } </style> <body> <div>這是個定寬塊狀元素，居中顯示</div> </body>
3、不定寬塊狀元素（3種方法）
（1）為需要水平居中的元素加table標簽；然後為table設置樣式： table{margin:0 auto;}
（2）將塊級元素轉換為內聯元素（eg：div{display：inline；}）；然後使用text-align:center;來實現居中
<style> .container{text-align:center;} .container ul{ list-style:none; margin:0; padding:0; display:inline; } .container li{ margin-right:8px; display:inline; } </style> <body> <div class="container"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body>
(3)給父元素設置float:left; position:relative; left:50%;
子元素設置position:relative; left:-50% 來實現水平居中
<style> .container{ float:left; position:relative; left:50%; } .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; } .container li{ display:inline;
float:left; /*有無都可*/
} </style> <body> <div class="container"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body>
