關于css各類居中的區分與用法
關于居中我們在平時的開發中都會經常用到，我個人是碰到需要居中的情況想到一種方法就随手一用，但有時候不管怎麼設定都沒有這個居中效果，是以特地學習了一下css各類居中的方法，包括水準居中和垂直居中。
水準居中
要設定水準居中的元素，首先我們要把元素劃分一下類别：
1.行内元素
如a,b,span,img,label,button,input,textarea等。
2.塊狀（級）元素：定寬塊狀元素，不定寬塊狀元素。
如div,header,form,ul,ol,table,article,h1-6,aside,footer等。
（其中定寬塊狀元素是指元素已明确設定了寬度，且不會再随浏覽器及視窗的變化而變化等類型的元素。
不定寬塊狀元素是指沒有設定寬度或者設定為百分比寬度等不固定寬的元素）
水準居中方法：
1.行内元素
如果對象為 文字、圖檔、或者其他行内元素（如上舉例） 時，為其父元素設定text-align:center;即可。
下面舉一個例子
<!-- -------舉例：文字、圖檔、行内元素button居中----------------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father{
text-align: center;
width:px;
height: px;
border: px solid pink;/*設定邊框更清楚地看出居中；*/
}
</style>
</head>
<body>
<div class="father">
這段文字相當于一個行内元素
<button>Click me </button>
</div>
</body>
</html>
<!-- 這個例子中div是父級元素，我們将文字設為居中，隻需要在這個div中設定即可，圖檔也是一樣。-->
效果如下：（也可以把文字删除，單獨試button。）
2.塊級元素
有 定寬 和 不定寬 兩種，定寬可以直接使用 margin：0 auto；（上下值可以不為零，也可以寫為margin-left:auto;
margin-right:auto;）為要設定居中的元素本身加上這一屬性；
栗子：
<!-- 定寬塊級元素，為<div class="fixWidth";></div>設定margin：0 auto; 假設把這裡的width: 300px;換為了width:30%等百分比或不确定寬度，就不會有居中的效果了！-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father{
width:px;
height: px;
border: px solid pink;
}
.fixWidth{
width: px;
height:px;
background-color: red;
margin: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="fixWidth">
</div>
</div>
</body>
</html>
效果：
不定寬塊級元素，有三種方法：第一種是在不定寬塊級元素的外面加上table标簽，使它變為 定寬塊級元素，第二種是利用display: inline，第三種是利用定位，下面用例子來說明：
<!-- 不定寬塊級元素設定水準居中，方法一：1.在需要設定的元素外層加上table标簽（因為table的寬度由它本身的内容決定，是以可以看作一個定寬塊狀元素），2.為table設定margin：0 auto即可-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
border: px solid green;
margin: auto;
}
.unFixWidth{
background-color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div class="unFixWidth">
将unFixWidth設定為水準居中吧！
</div>
</td>
</tr>
</table>
</body>
</html>
效果如下：
<!-- 不定寬塊級元素設定水準居中，方法二：将要居中的元素變為行内元素，然後按照行内元素在父元素中設定text-align：center；即可-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father{
width: px;
height: px;
border: px solid green;
text-align: center;
}
.unFixWidth{
display: inline;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="unFixWidth">
将unFixWidth設定為水準居中吧！
</div>
</div>
</body>
</html>
效果：
<!-- 不定寬塊級元素設定水準居中，方法三：1.為父元素設定float: left;position: relative;left: 50%; 2.為要居中的元素設定 position: relative; left: -50%;-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father{
width: px;
height: px;
border: px solid green;
float: left;
position: relative;
left: %;
}
.unFixWidth{
position: relative;
left: -%;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="unFixWidth">
将unFixWidth設定為水準居中吧！
</div>
</div>
</body>
</html>
效果：
垂直居中
垂直居中有兩種情況：父元素高度确定的單行文本、父元素高度确定的多行文本。
1.父元素高度确定的單行文本
<!-- 父元素高度确定的單行文本，可利用height和line-height來達到垂直居中的效果-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.center{
height:px;
line-height: px;
background-color: red;
}
</style>
</head>
<body>
<div class="center">
将unFixWidth設定為垂直居中吧！
</div>
</body>
</html>
效果：
但是如果多行文本，再用這個方法就不可行了，如下圖，溢出
2.父元素高度确定的多行文本
方法一：使用vertical-align:middle配合display：table-cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.centerText{
width:px;
height:px;
background-color: red;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="centerText">
将我設定為垂直居中吧！
将我設定為垂直居中吧！
将我設定為垂直居中吧！
将我設定為垂直居中吧！
</div>
</body>
</html>
效果：
方法二：可以使用table标簽來達到垂直居中的效果
<!-- 在div外層套入table、tr、td -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.centerText{
height:px;
line-height: px;
background-color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div class="centerText">
将我設定為垂直居中吧！
将我設定為垂直居中吧！
将我設定為垂直居中吧！
将我設定為垂直居中吧！
</div>
</td>
</tr>
</table>
</body>
</html>
效果：