1、水準垂直居中
<div class="center">
<span>垂直居中</span>
</div>
div.center{
text-align:center;
background:hsl(0,100%,97%);
}
div.center span{
width:33%;
height:auto;
}
但是這種方式沒有讓元素垂直居中，需要為div增加padding 或者為span元素設定margin-top和margin-bottom。 實作效果如下圖：
2、利用margin:auto來實作居中
<div class="center">
<span>垂直居中</span>
<span style="white-space:pre"> </span></div>
<span style="white-space: pre;"> </span>div.center{
background:#ADFF2F;
}
div.center span{
width:33%;
height:auto;
margin:0 auto;
display:block;
}
為了使margin:0 auto産生效果，這裡的display:block是必須的 。 實作效果如下圖：
3、使用table-cell，實作水準和垂直居中
<div class="center-aligned">
<div class="center-core">
<span>水準居中</span>
</div>
</div>
<span style="white-space:pre"> </span>.center-aligned{
display:table;
background:#BCEE68;
width:100%;
}
.center-core{
display:table-cell;
text-align:center;
vertical-align:middle;
}
實作效果圖如下：
為了阻止div collapse（我了解的搜尋，即寬度為包裹的元素的寬度）,最外層的父元素必須設定width:100% 為了使内容垂直居中，外層的包裹元素也必須設定相應的高度。同樣為了使元素在body中垂直居中，可以為body或html設定相應的高度。 如果為.center-core設定高度為100px,那麼實作的結果圖如下：
4、使用position:absolute 實作居中
<div class="absolute-aligned">
<span>水準居中</span>
</div>
<span style="white-space:pre"> </span>.absolute-aligned{
position:relative;
min-height:300px;
background:#BCEE68;
}
.absolute-aligned span{
width:50%;
min-width:100px;
height:auto;
overflow:auto;
position:absolute;
margin:0 auto;
top:0;
bottom:0;
left:0;
right:0;
border:1px solid red;
text-align:center;//使元素内容水準居中
}
這種方式有一種限制就是：父元素中必須以一種方式設定height,否則實作的效果隻是一條線。 最終實作的效果圖如下：
5、利用translate實作居中
<span style="white-space:pre"> </span><div class="center">
<span>水準垂直居中</span>
</div>
<span style="white-space:pre"> </span>.center{
background:#BCEE68;
position:relative;
min-height:500px;
}
.center span{
position:absolute;
top:50%;
left:50%;
width:30%;
height:auto;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
border:1px solid red;
text-align:center;
}
這種方式的不足之處是： IE8及更早的浏覽器中不支援 父級容器需要顯示的設定高度，因為無法從任何它的絕對定位的元素中獲得高度。 如果内容包含文本，目前浏覽器合成技術可能會使移動的文本變得的模糊。顯示如下：
6.使用Flexbox centering
<span style="white-space:pre"> </span><div class="center">
<span>水準垂直居中</span>
</div>
<span style="white-space:pre"> </span>.center{
background:#BCEE68;
display:flex;
justify-content:center;//元素在橫軸的對齊方式
align-items:center;//元素在縱軸的對齊方式
}
.center span{
width:30%;
height:auto;
border:1px solid black;
text-align:center;
}
顯示結果如下：
在很多方面，flexbox是最簡單的方式，但是早期版本的IE并不支援，完整的css代碼如下：
<span style="white-space:pre"> </span>.center{
background:#BCEE68;
display:-webkit-box;/*OLD: Safari, iOS 6 and earlier; Android browser, older WebKit*/
display:-moz-box;/*OLD: Firefox (can be buggy)*/
display:-ms-flexbox;/*OLD: IE 10*/
display:-webkit-flex;/*FINAL, PREFIXED, Chrome 21+*/
display:flex;/*FINAL: Opera 12.1+, Firefox 22+*/
/*目前沒有浏覽器支援 box-align 屬性,屬性規定如何對齊框的子元素,指在垂直方向上如何對齊*/
-webkit-box-align:center;/*box-align 。Safari、Opera 以及 Chrome */
-moz-box-align:center;/*Firefox*/
-ms-flex-align:center;
/*設定或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。*/
-webkit-align-items:center;
align-items:center;
/*box-pack 屬性規定當框大于子元素的尺寸，在何處放置子元素
該屬性規定水準框中的水準位置，以及垂直框中的垂直位置。
通過一起使用 box-align 和 box-pack 屬性，對 div 框的子元素進行居中：*/
-webkit-box-pack:center;
-moz-box-pack:center;
-ms-flex-pack:center;
/*設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式*/
-webkit-justify-content:center;
justify-content:center;
7、使用calc實作居中
<span style="white-space:pre"> </span>.cal{
background:#BCEE68;
min-height:600px;
position:relative;
}
.cal span{
border:1px solid black;
width:40%;
height:auto;
position:absolute;
top:-webkit-calc(50%-20%);
top:-moz-calc(50%-20%);
top:calc(50%-20%);
left:-webkit-calc(50%-20%);
left:-moz-calc(50%-20%);
left:calc(50%-20%);
}
如果直接設定left:50%;top:50%;那麼span元素的z左上角将會位于父元素的中心，因為span元素的寬度為40%,是以為了使span元素的中心位于父元素的中心需要calc(50%-40%/2); 這種技巧比較适合具有固定尺寸的元素。IE8不相容此屬性。
8、使用僞元素使元素垂直居中（這個原理我還沒有弄清楚）
<div class="wrap">
<div class="centered">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div>
</div>
<span style="white-space:pre"> </span>html,body{
height:100%;
}
body{
min-width:500px;
background:#999;
font-size:100%;
border:1px solid red;
}
.wrap{
text-align:center;
height:100%;
}
.wrap:before{
content:'';
display:inline-block;
height:100%;
/*該屬性定義行内元素的基線相對于該元素所在行的基線的垂直對齊 middle為把此元素放置在父元素的中部。*/
vertical-align:middle;
margin-right:-0.25em;
border:1px solid black;
}
.centered{
display:inline-block;
vertical-align:middle;
width:480px;
background:#eee;
text-align:left;
}
運作結果顯示如下：
原英文位址：http://demosthenes.info/blog/723/Seven-Ways-of-Centering-With-CSS