CSS內聯元素、塊級元素的水平居中和垂直居中方法總結
在牛客網上刷題，錯了一道塊級元素居中的題，藉此複習一下CSS中元素居中的各種方式：
更新：BootStrap輔助類：center-block
用法：定寬容器中的內容到達寬度自動換行，高度不定，自動水平垂直都居中。簡單測試了一下，中文日文可自動換行，英文不行。
水平居中
一. 內聯元素居中（文字text、圖片img、按鈕button等）
給父元素設定text-align:center。
給一個例子：使若干個元素（數量可變），在一行中居中顯示，可用列表實現。我們知道列表中的<li>標籤元素為塊級元素，故可先將其display:inline，在一行中顯示，然後將<li>的父元素，<ul>水平居中顯示即可，程式碼如下：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
li{display: inline;}
ul{text-align: center;}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li 注意：前提是子元素（即例子中的<li>）沒有被設定浮動。
二. 塊級元素居中
①定寬塊級元素居中
margin:0 auto;
②不定寬塊級元素居中
總共有三種方法可解：
Ⅰ.利用display:inline使塊級元素內聯顯示；
Ⅱ.利用<table>長度自適應的特性；
Ⅲ.結合父元素，設定浮動和定位。
方法Ⅰ詳見以上 內聯元素水平浮動 。
方法Ⅱ：<table>是個盛放其他元素的塊級容器，其寬度不預設父元素的寬，而是隨其中文字長度決定，因此可看作一個定寬塊級元素。
給需要水平浮動的元素設定display:table或放入<table>標籤中，即可使用margin:0 auto像定寬塊級元素一樣居中顯示了。程式碼如下：
<table>標籤巢狀：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
table{margin: 0 auto;}
</style>
</head>
<body>
<table>
<tr>
<td>
<p>這是一個不定寬的塊級元素,增刪其中文字後仍然居中</p>
</td>
</tr>
</table>
</body>
</html>display:table;
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
p{display: table;margin: 0 auto;}
</style>
</head>
<body>
<p>這是一個不定寬的塊級元素,增刪其中文字後仍然居中</p>
</body>
</html>方法Ⅲ：利用相對定位，使父元素相對於body向右偏移50%，再使需要居中的元素相對於父元素向左偏移50%，為了防止高度塌陷設定浮動前一定要給父元素清除浮動。為了更直觀的看到兩div位置，給父元素加了黑色邊框，子元素加了紅色邊框，程式碼如下：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
#father{
position: relative;
clear:both;
float: left;
left: 50%;
border: 1px solid black;
}
#child{
position: relative;
float: left;
left: -50%;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="father">
<div id="child">
這是一個不定寬的塊級元素,增刪其中文字後仍然居中
</div>
</div>
</body>
</html>父元素position:absolute，子元素保持相對定位也可以實現水平居中，
因為絕對定位使父元素脫離了文件流。
垂直居中
一. 未知高度元素的垂直居中
非常好用的<table>又來啦，很簡單的可以利用<td>標籤預設垂直居中（無需顯式的設定vertical-align: middle）的特性，讓<table>鋪滿頁面，將要居中的元素放進去即可。程式碼如下：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
table {
position:absolute;
width:100%; height:100%;
border: 1px solid black;
}
.test {border: 1px solid red; }
</style>
</head>
<body>
<table>
<tr>
<td>
<ul class="test">
<li>假裝有內容</li>
<li>假裝有內容</li>
<li>假裝有內容</li>
<li>假裝有內容</li>
<li>假裝有內容</li>
<li>假裝有內容</li>
</ul>
</td>
</tr>
</table>
</body>
</html>不難理解，用display:table-cell顯示成<table>亦可實現，但要注意IE不支援該屬性的問題
二.高度固定元素的垂直居中
同理使用table<td>標籤預設垂直居中，可將元素放置於<table>中，或設定display:table-cell，根據需求設定<table>寬高及位置。程式碼同上。