在css布局中刨裆，經(jīng)常會有樣式居中的需求〕喝Γ現(xiàn)在列舉以下常見的布局方法。
首先我們要明確帆啃，居中一定有一個參照物瞬女。所以會涉及到兩個元素，分別是父元素和居中元素努潘。而且父元素一定是塊級元素诽偷。（父元素不可以設(shè)置寬高的話，居中就沒意義了）,另外疯坤，我們只討論父元素报慕、居中元素的寬高不都確定的情況（比如垂直居中，父元素和居中元素的高度都知道的話压怠，我們總可以通過指定具體的margin眠冈、padding來實現(xiàn)居中）
1.水平居中
居中元素如果是塊級元素，通過改變margin的方式實現(xiàn)水平居中
//細(xì)分居中元素有固定寬度和無固定寬度的情況
//1.寬度固定菌瘫，設(shè)置margin:0 auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.parent{
background: red;
}
.child{
background: blue;
width: 300px;
height: 100px;
margin: 0 auto;
}
</style>
</head>
<body >
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
結(jié)果：
//2.寬度不固定，設(shè)置margin:0 <具體數(shù)值>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.parent{
background: red;
}
.child{
background: blue;
height: 100px;
margin: 0 100px;
}
</style>
</head>
<body >
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
結(jié)果：
同樣的诫舅，我們可以設(shè)置父元素的padding來達到居中效果。這里就不做展示了宫患。
上面列舉了居中元素是塊級元素的兩種情況刊懈。都是通過改變margin的數(shù)值來達到居中。原理是什么呢娃闲？我們知道盒子模型中虚汛，在水平格式中有7個屬性
分別是，margin-left,border-left,padding-left,width,padding-right,border-right,margin-right皇帮。而且這7個數(shù)值加起來要等于元素的需要的總寬度（對于塊級元素來說即父元素的內(nèi)容寬度）卷哩。在這個7個屬性值里面，是有默認(rèn)值的属拾，margin将谊、width的默認(rèn)值是auto，其他為0渐白。這個auto屬性使得元素會自動計算它該有的屬性值尊浓。第一種情況，居中元素寬度固定纯衍，則只有margin需要計算栋齿。數(shù)值為（父content寬度-居中元素寬度-0 * 2（padding為0）-0*2（border為0））/2。因而實現(xiàn)了水平居中。第二種情況則相反瓦堵。固定了margin值基协，width則自動計算為（父content寬度-(0+0+100(margin數(shù)值)*2)），從而達到居中菇用。
上面講述的兩個例子都是塊級元素澜驮，對于行內(nèi)元素則不行了，因為行內(nèi)元素的寬度受限于內(nèi)容寬度惋鸥。因而無法用margin實現(xiàn)居中.這種情況下泉唁，可以通過父元素設(shè)置text-align實現(xiàn)居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.parent{
background: red;
text-align:center;
}
.child{
background: blue;
color:white;
}
</style>
</head>
<body >
<div class="parent">
<span class="child">測試文字</span>
</div>
</body>
</html>
結(jié)果：
如果針對行內(nèi)塊狀元素亭畜，上述第一種和第三種方法均可適用。但是寬度auto迎卤，設(shè)置margin的方式則不行拴鸵，畢竟行內(nèi)塊狀元素不設(shè)置寬度的話，寬度則受限于內(nèi)容蜗搔。
2.垂直居中
上一小節(jié)劲藐。我們提到適用margin來實現(xiàn)塊級元素水平居中，原理則是水平格式7個屬性之和要達到元素應(yīng)有的寬度（塊級元素應(yīng)有寬度則為父元素的內(nèi)容寬度）樟凄。對于垂直居中則無效了聘芜。因為正常流的塊級元素magrin設(shè)置為auto時，會被計算成0.
對于單行文本的垂直居中缝龄，居中元素通常為行內(nèi)元素和行內(nèi)塊狀元素汰现。一種常用的辦法是設(shè)置height和line-height，并將兩者的數(shù)值設(shè)置為相同（注意：父元素的高度一定要高于居中元素的高）叔壤。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.parent{
background: red;
position: relative;
height: 300px;
width: 300px;
}
.child{
background: blue;
color:white;
margin: 0px 0px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body >
<div class="parent">
<p class="child">測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本</p>
</div>
</body>
</html>
對于多行文本的垂直居中瞎饲，一種常用的方法是通過相對定位和絕對定位相結(jié)合以及tansform的方式實現(xiàn)。
此方法要點是使用了top百分比屬性炼绘，然后用translate來修正偏移嗅战。
由于使用了transform屬性，所以這個訪問存在兼容性俺亮。需要Safari 3.1+驮捍、 Chrome 8+、Firefox 4+脚曾、Opera 10+东且、IE9+
另一種方式通過vertical-align實現(xiàn)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.parent{
background: red;
height: 300px;
width: 300px;
font-size: 0px;
}
.child{
background: blue;
color:white;
margin: 0px 0px;
vertical-align: middle;
display: inline-block;
font-size:14px;
}
.shadow{
display: inline-block;
height: 100%;
width: 0px;
vertical-align: middle;
}
</style>
</head>
<body >
<div class="parent">
<span class="shadow"></span>
<p class="child">測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本</p>
</div>
</body>
</html>
你可能注意到幾個細(xì)節(jié)：
1.有一個shadow元素斟珊，該元素是用于跟居中元素做對齊用的苇倡。
2.shadow元素富纸，居中元素囤踩、父元素都設(shè)置了font-size旨椒，因為在他們之間有個看不到而又實際存在的分段符，該分段符也占據(jù)了空間堵漱，設(shè)置了0font-size之后就正常了综慎。
至此，水平居中和垂直居中就介紹的差不多了勤庐，那么垂直居中怎么實現(xiàn)呢示惊？只要將以上方法結(jié)合一下就可以啦，這里就不展開篇幅說明了愉镰，只列舉兩個最常用的水平垂直居中例子米罚。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.parent{
background: red;
height: 300px;
width: 300px;
font-size: 0px;
text-align: center;
}
.child{
background: blue;
color:white;
width: 100px;
margin: 0px 0px;
vertical-align: middle;
display: inline-block;
font-size:14px;
}
.shadow{
display: inline-block;
height: 100%;
width: 0px;
vertical-align: middle;
}
</style>
</head>
<body >
<div class="parent">
<span class="shadow"></span>
<p class="child">測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.parent{
background: red;
height: 300px;
width: 300px;
position: relative;
}
.child{
background: blue;
color:white;
width: 100px;
margin: 0px 0px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body >
<div class="parent">
<p class="child">測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本</p>
</div>
</body>
</html>
另外，使用flex布局能輕松實現(xiàn)居中丈探，只是兼容性不太好录择。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.parent{
background: red;
height: 300px;
width: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.child{
background: blue;
color:white;
width: 100px;
margin: 0px 0px;
}
</style>
</head>
<body >
<div class="parent">
<p class="child">測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本測試文本</p>
</div>
</body>
</html>
