一、CSS樣式設置小技巧
1.1、水平居中設置-行內元素
我們在實際工作中常會遇到需要設置水平居中的場景，比如爲了美觀，文章的標題一般都是 水平居中 顯示的。
這裏我們又得分兩種情況：行內元素 還是 塊狀元素 ，塊狀元素裏面又分爲定寬塊狀元素，以及不定寬塊狀元素。今天我們先來了解一下行內元素怎麼進行水平居中？
如果被設置元素爲文本、圖片等行內元素時，水平居中 是通過給父元素設置 text-align:center 來實現的。(父元素和子元素：如下面的html代碼中，div是“我想要在父容器中水平居中顯示”這個文本的父元素。反之這個文本是div的子元素 )如下代碼：<div class="txtCenter">我想要在父容器中水平居中顯示。</div>
代碼示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>定寬塊狀元素水平居中</title>
<style>
div{
border:1px solid red;
margin:20px;
}
div.txtCenter{
text-align:center;
}
.imgCenter{
text-align:center;
}
</style>
</head>
<body>
<div class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中顯示。</div>
<!--下面是任務部分-->
<div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" /></div>
</body>
</html>
運行結果：
1.2、水平居中設置-定寬塊狀元素
當被設置元素爲 塊狀元素 時用 text-align：center 就不起作用了，這時也分兩種情況：定寬塊狀元素 和 不定寬塊狀元素。
這一小節我們先來講一講定寬塊狀元素。(定寬塊狀元素：塊狀元素 的寬度 width 爲固定值。)
滿足定寬和塊狀兩個條件的元素是可以通過設置 “左右margin” 值爲 “auto” 來實現居中的。我們來看個例子就是設置 div 這個塊狀元素水平居中：
代碼示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定寬塊狀元素水平居中</title>
<style>
div{
border:1px solid red;
width:200px; /*定寬*/
margin:20px auto;
}
</style>
</head>
<body>
<div>我是定寬塊狀元素，我要水平居中顯示。</div>
</body>
</html>
運行結果：
1.3、水平居中總結-不定寬塊狀元素方法（一）
在實際工作中我們會遇到需要爲 “不定寬度的塊狀元素” 設置居中，比如網頁上的分頁導航，因爲分頁的數量是不確定的，所以我們不能通過設置寬度來限制它的彈性。(不定寬塊狀元素：塊狀元素的寬度width不固定。)
不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：
1、 加入 table 標籤
2、 設置 display: inline 方法：與第一種類似，顯示類型設爲 行內元素，進行不定寬元素的屬性設置
3、 設置 position:relative 和 left:50%：利用 相對定位 的方式，將元素向左偏移 50% ，即達到居中的目的
這一小節我們來講一下第一種方法：
爲什麼選擇方法一加入 table標籤 ? 是利用 table標籤 的長度自適應性—即不定義其長度也不默認父元素 body 的長度（table其長度根據其內文本長度決定），因此可以看做一個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。
代碼示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定寬塊狀元素水平居中</title>
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>
</head>
<body>
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
</body>
</html>
運行結果：
1.4、水平居中總結-不定寬塊狀元素方法（二）
除了上一節講到的插入 table標籤，可以使不定寬塊狀元素水平居中之外，本節介紹第2種實現這種效果的方法，改變元素的 display 類型爲行內元素，利用其屬性直接設置。
第二種方法：改變塊級元素的 display 爲 inline 類型（設置爲 行內元素 顯示），然後使用 text-align:center 來實現居中效果。如下例子：
代碼示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定寬塊狀元素水平居中</title>
<style>
.container{text-align:center;}
.container ul{list-style:none;margin:0;padding:0;display:inline;}
.container li{margin-right:8px;display:inline;}
</style>
</head>
<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>
</html>
運行結果：
1.5、水平居中總結-不定寬塊狀元素方法（三）
除了前兩節講到的插入table標籤，以及改變元素的display類型，可以使不定寬塊狀元素水平居中之外，本節介紹第3種實現這種效果的方法，設置浮動和相對定位來實現。
**方法三：**通過給父元素設置 float，然後給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現水平居中。
我們可以這樣理解：假想 ul 層的父層（即下面例子中的 div 層）中間有條平分線將 ul 層的父層（div 層）平均分爲兩份，ul 層的 css 代碼是將 ul 層的最左端與 ul 層的父層（div 層）的平分線對齊；而 li 層的 css 代碼則是將 li 層的平分線與 ul 層的最左端（也是 div 層的平分線）對齊，從而實現 li 層的居中。
代碼示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定寬塊狀元素水平居中</title>
<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;
}
/*下面是代碼任務區*/
.wrap-center{
background:#ccc;
}
</style>
</head>
<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>
<!--下面是代碼任務區-->
<div class="wrap">
<div class="wrap-center">我們來學習一下這種方法。</div>
</div>
</body>
</html>
運行結果：
此篇博客代碼下載地址：CSS教程9代碼下載
博主的所有博客目錄如下：博客文章目錄彙總
Java面試部分的博客目錄如下：Java筆試面試目錄
轉載請標明出處，原文地址：https://blog.csdn.net/weixin_41835916 如果覺得本文對您有幫助，請點擊頂支持一下，您的支持是我寫作最大的動力，謝謝。
