多種方法實現水平居中和垂直居中總結
水平居中和垂直居中在編寫HTML5靜態頁面過程中經常遇到，現在就來總結一下對於不同的元素如何實現居中。
一、水平居中：
1、對於行內元素，在父級塊級元素css屬性中使用 text-align：center即可。
2、對於width固定的塊級元素，使用margin:20px auto; /* margin-left 與 margin-right 設定為 auto */
3、對於width不固定的塊級元素，有三種常用方法：
(1) 使用table標籤，為什麼選擇方法一加入table標籤? 是利用table標籤的長度自適應性—即不定義其長度也不預設父元素body的長度（table其長度根據其內文字長度決定），因此可以看做一個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。
下面看實現步驟：
第一步：為需要設定的居中的元素外面加入一個 table 標籤 ( 包括 、、 )。
第二步：為這個 table 設定“左右 margin 居中”（這個和定寬塊狀元素的方法一樣）。
第三步：把需要水平居中的元素放到table標籤中的td標籤中。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定寬塊狀元素水平居中</title>
<style>
table{
margin:20px auto;
}
/*下面是任務區程式碼*/
.wrap{
background:#ccc;
}
</style>
</head>
<body>
<table><tbody>
<tr><td>
<p (2) 改變塊級元素的 display 為 inline 型別（設定為 行內元素 顯示），然後使用 text-align:center 來實現居中效果
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定寬塊狀元素水平居中</title (3) 通過給父元素設定 float，然後給父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left: -50% 來實現水平居中。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定寬塊狀元素水平居中</title>
<style>
.container{
float:left;
position:relative;
left:50%;
}
.container ul{
/* margin:0;
padding:0;*/
position:relative;
left:-50%;
}
.container li{display:inline;}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">11111111111</a></li>
<li><a href="#">22222222222</a></li>
<li><a href="#">33333333333</a></li>
</ul>
</div>
</body>
</html>二、垂直居中：
1、父元素高度確定的單行文字 的豎直居中的方法是通過設定父元素的 height 和 line-height 高度一致來實現的。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
.wrap{
display:inline;
text-align:center;
}
.wrap h2{
height:100px;
line-height:100px;
background:#ccc;
}
</style>
</head>
<body>
<!--下面是程式碼任務部分-->
<div class="wrap">
<h2>hi,imooc!</h2>
</div>
</body>
</html>2、父元素高度確定的多行文字:
使用插入 table (包括tbody、tr、td)標籤，可以把要垂直居中的div放到table的td中。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度確定的多行文字</title>
<style>
table{margin:20px auto;}
</style>
</head>
<body>
<table><tbody>
<tr><td>
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr>
</tbody></table>
</body>
</html>