今天根據(jù)客戶的修改意見,修改一組有帶有縮略圖片的標(biāo)題的列表,圖片在列表的最左邊,圖片的大小是固定的.要求是,標(biāo)題字?jǐn)?shù)如果過多的話,可以折成兩行.但是要求垂直居中.最后解決了這個(gè)問題,但是沒有做兼容性的測試.

下面就是我收集到的垂直的居中的幾個(gè)方法,每個(gè)方法都拿出一個(gè)實(shí)例來演示

絕對居中

.relative-container{
    position:relative
}
.absolute-container{
    position:absolute;
    margin:auto;
    width:50%;
    height:50%;
    top: 0; left: 0; bottom: 0; right: 0;
}

一個(gè)栗子:垂直居中

優(yōu)點(diǎn):

1. 兼容所有的瀏覽器
2. 代碼簡單,沒有太多的hack

缺點(diǎn):

1. 必須聲明一個(gè)高度
2. 在window phone上不起作用

負(fù)邊框居中

.n-margin-container{
        width: 300px;  
        height: 200px;  
        padding: 20px;  
        position: absolute;  
        top: 50%; left: 50%;  
        margin-left: -170px; /* (width + padding)/2 */  
        margin-top: -120px; /* (height + padding)/2 */  
}

優(yōu)點(diǎn):

1. 代碼量少
2. 兼容性好

缺點(diǎn):

1. 不支持自適應(yīng),不支持百分比和max-/min-屬性
2. 邊距大小與padding,和是否定義box-sizing: border-box有關(guān)，計(jì)算需要根據(jù)不同情況。

變形

用transform屬性來代替負(fù)邊距

.transform-center{
    width: 50%;  
    margin: auto;  
    position: absolute;  
    top: 50%; left: 50%;  
    -webkit-transform: translate(-50%,-50%);  
      -ms-transform: translate(-50%,-50%);  
          transform: translate(-50%,-50%);  
}

優(yōu)點(diǎn):

1. 相比負(fù)邊距,能夠自適應(yīng),支持百分比
2. 代碼少

缺點(diǎn):

1. IE8以下不支持
2. 可能會(huì)影響其他的transform屬性
3. 某些情況下回出現(xiàn)文本或元素邊界渲染模糊的現(xiàn)象

表格居中

算是終極大招吧

css:

.table-like{
    display:table;
}

.table-cell-like {  
  display: table-cell;  
  vertical-align: middle;  
}  
.Center-Block {  
  width: 50%;  
  margin: 0 auto;  
}  

html:

<div class="table-like">  
  <div class="table-cell-like">  
    <div class="Center-Block">  
    <!-- CONTENT -->  
    </div>  
  </div>  
</div>  

優(yōu)點(diǎn)：

1. 高度可變
2. 內(nèi)容溢出會(huì)將父元素?fù)伍_。
3. 跨瀏覽器兼容性好。

缺點(diǎn)：

1. 需要額外html標(biāo)記

行內(nèi)塊元素

一個(gè)同事看到他用到過這種居中方法

/* This parent can be any width and height */
.block {
  text-align: center;
  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}
 
/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* 消除inline-block元素之間的間距,具體可以查看后面的參考 */
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

html:

<div class="block" style="height: 300px;">
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </div>
</div>
<div class="block" style="height: 200px;">

例子:inline-block垂直居中

優(yōu)點(diǎn)：

1. 高度可變
2. 內(nèi)容溢出會(huì)將父元素?fù)伍_。
3. 支持跨瀏覽器，也適應(yīng)于IE7。

缺點(diǎn)：

1. 需要一個(gè)容器
2. 水平居中依賴于margin-left: -0.25em;該尺寸對于不同的字體/字號(hào)需要調(diào)整。
3. 內(nèi)容塊寬度不能超過容器的100% - 0.25em。

flex

flex居中的例子

.flex-parent{
    display:flex;
    justify-content:center;
    align-items: center;
    background: #AAA;
    height: 300px;
}
.flex-child{
    background: #222;
    color: #FFF;
    width: 100px;
    height: 100px;    
}

html:

<div class="flex-parent">
  <div class="flex-child"></div>
</div>

優(yōu)點(diǎn)：

1. 內(nèi)容塊的寬高任意，優(yōu)雅的溢出。
2. 可用于更復(fù)雜高級(jí)的布局技術(shù)中。

缺點(diǎn)：

1. IE8/IE9不支持。
2. Body需要特定的容器和CSS樣式。
3. 運(yùn)行于現(xiàn)代瀏覽器上的代碼需要瀏覽器廠商前綴。
4. 表現(xiàn)上可能會(huì)有一些問題

小結(jié)

1. 絕對定位的方法比較萬金油
2. display:table的方法兼容性最好
3. flex是未來的趨勢
4. transform是實(shí)現(xiàn)不知道要固定的框的大小情況下的好辦法,但是元素可能會(huì)模糊

參考

• 八種垂直居中布局
• 演示的效果的地址
• 極客標(biāo)簽課程垂直居中的相關(guān)練習(xí)
• inline-block這里為什么:before有一個(gè)margin-right:-0.25em?