摘要：用來控制表格單元格寬度你也許遇到過給表格設(shè)置了寬度，但是不起作用的問題。這是因?yàn)閱卧竦膶挾仁歉鶕?jù)其內(nèi)容進(jìn)行調(diào)整的。顯而易見的，默認(rèn)情況下，單元格寬度受其內(nèi)容約束。而設(shè)置了后，其單元格寬度變得可控了。

本文首發(fā)于我的博客
在上文《你不知道的CSS（一）》中，介紹了兄弟選擇器美化表單，font-size:0消除間隙，overflow清除浮動(dòng)，border繪制三角形等7個(gè)實(shí)用技巧。由于文章長度限制，還遺留了一些技巧沒有介紹，考慮到日后可能會(huì)有更多的技巧需要補(bǔ)充進(jìn)來，便將上文改名為你不知道的CSS（一），名字其實(shí)有點(diǎn)浮夸，希望能完善為一個(gè)系列，也希望該系列中介紹的技巧能夠幫助到更多人解決實(shí)際開發(fā)中遇到的問題。在這里感謝SegmentFault的小編在微博上的推薦。本文將重點(diǎn)介紹CSS中未知高度容器的垂直居中技巧。同樣每個(gè)技巧將結(jié)合demo或者圖示來說明（如果demo無法打開，請(qǐng)自備梯子，原因你懂得?）。

在已知父子高度的情況下，實(shí)現(xiàn)垂直居中是很容易的事。margin ， padding，absolute + 負(fù)margin , 甚至于 line-height都是可行的方案。這里不再展開，文章主要來介紹在父容器高度固定，自容器高度自適應(yīng)的情況下，來實(shí)現(xiàn)其垂直居中于父級(jí)盒子的幾種方案。為了使案例更真實(shí)，我們來模擬一個(gè)垂直居中于頁面中的彈出層(modal)。

先運(yùn)行下Demo 過過癮?……

定義如下模態(tài)框的基本樣式（部分樣式使用bootstrap）

.vh-modal {
  height: 640px;
  border: 1px solid #ccc;
  position: relative;
  .vh-modal-content {
    min-width: 50%;
    max-width: 80%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .2);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .vh-modal-title {
    padding: 20px;
    font-size: 20px;
    border-bottom: 1px solid #ccc;
    text-align: left;
    margin: 0;
  }
  .vh-modal-body {
    padding: 20px;
    text-align: left;
  }
  .vh-modal-foot {
    text-align: right;
    padding: 20px;
    border-top: 1px solid #ccc;
  }
}

利用（偽）元素和display:inline-block的方案來實(shí)現(xiàn)垂直居中是我個(gè)人常用的也是推薦大家使用的方法。

.vh-modal-1 {
  text-align: center; //水平居中
  font-size: 0; //消除空隙, 見 https://smohan.net/blog/6gr77h
  &::before,
  >.vh-modal-content {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
  }
  &::before {
    content: "";
    height: 100%;
  }
}

  

    
模態(tài)框
    
...
    

      確定
    
  

如上圖中的::before你也可以使用一個(gè)真實(shí)的元素代替。

使用absolute絕對(duì)定位子元素，并且設(shè)置其top:50%; left:50%，然后再利用css3的transform: translate(-50%, -50%); 設(shè)置負(fù)值偏移回來也是一種有效的垂直居中方案，但要注意其兼容性以及不要將子容器置于父容器半個(gè)像素的位置上(如500.5px)，否則子容器會(huì)出現(xiàn)模糊。

.vh-modal-2 {
  >.vh-modal-content {
    //盡可能的不要讓該元素的寬度或者高度出現(xiàn)奇數(shù)，否則可能會(huì)導(dǎo)致模糊
    display: inline-block; //為了自適應(yīng)寬度，可以固定寬度
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

transform法還有一個(gè)缺點(diǎn)，就是當(dāng)子容器高度超出視窗高度的時(shí)候，它會(huì)被直接截?cái)啵ㄈ缦聢D），而不是想象中的隨著瀏覽器滾動(dòng)到頂部而滾動(dòng)顯示完全（模態(tài)框的頭部被截掉了）。

使用div來模擬table的行為也可以實(shí)現(xiàn)垂直居中。缺點(diǎn)是要在子容器外層再包裹一個(gè)父元素vh-modal-cell用來模擬table-cell。

.vh-modal-3 {
  display: table;
  width: 100%;
  .vh-modal-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .vh-modal-content {
    display: inline-block;
  }
}

  

    

       ...
    
  

毫無疑問，flex盒模型是最佳的實(shí)踐方案。目前幾乎所有現(xiàn)代瀏覽器都支持flex布局，尤其是移動(dòng)端（部分機(jī)型UC瀏覽器效果太差，差評(píng)?）。
基于flex盒模型的水平垂直居中有如下兩種方案：

  

    ...
  

.vh-modal-4 {
  display: flex;
  align-items: center;
  justify-content: center;
  >.vh-modal-content {}
}

這個(gè)方案是最神奇的，僅僅給子元素設(shè)置了margin:auto;屬性，一切就這么發(fā)生了?。

.vh-modal-5 {
  display: flex;
  margin: 0;
  >.vh-modal-content {
    margin: auto;
  }
}

就如截圖中圈出的那樣，類似這種多層級(jí)的數(shù)字，我們大概第一反應(yīng)是使用JavaScript循環(huán)列表，利用其index拼接而成的。事實(shí)上，僅僅使用css的counter屬性也可以實(shí)現(xiàn)該功能，甚至實(shí)現(xiàn)起來更高效。博客的【熱門文章】欄目的索引就是使用counter屬性實(shí)現(xiàn)的。

ol {
  counter-reset: decimal;
  list-style-type: none; //去掉默認(rèn)的list-style 
  li {
    &::before {
      counter-increment: decimal;   
      content: counters(decimal, ".") " ";
    }
  }
}

就像圖上那樣，我們很早就已經(jīng)將counter屬性用在真實(shí)項(xiàng)目中了，而這僅僅只是counter屬性一個(gè)簡(jiǎn)單的使用場(chǎng)景，它甚至可以幫助你完成一個(gè)簡(jiǎn)單的購物車計(jì)費(fèi)場(chǎng)景（如圖，當(dāng)然，真實(shí)項(xiàng)目中沒有人這么干）。

預(yù)覽多級(jí)別列表和購物車demo

CSS計(jì)數(shù)器是CSS2.1中自動(dòng)計(jì)數(shù)編號(hào)部分的實(shí)現(xiàn)。作為由CSS維護(hù)的變量，counter屬性還有很多有趣的使用場(chǎng)景，具體就不展開了。請(qǐng)參考MDN上的使用CSS計(jì)數(shù)器章節(jié)。

你也許遇到過給表格設(shè)置了寬度，但是不起作用的問題。這是因?yàn)閱卧竦膶挾仁歉鶕?jù)其內(nèi)容進(jìn)行調(diào)整的。刨根揭底，是因?yàn)楸砀裼袀€(gè)叫做table-layout的屬性，其瀏覽器默認(rèn)值是auto在作怪。當(dāng)我們把這個(gè)值設(shè)置為fixed的時(shí)候，我們給th/td標(biāo)簽設(shè)置的寬度就起作用了。用法很簡(jiǎn)單：

table {
 table-layout: fixed;
 width: 100%;
}

截圖是設(shè)置table-layout: fixed;前后對(duì)比圖，左邊用藍(lán)色標(biāo)注的是默認(rèn)行為的表格，右邊是設(shè)置了table-layout: fixed;后的樣式。顯而易見的，默認(rèn)情況下，單元格寬度受其內(nèi)容約束。而設(shè)置了table-layout: fixed;后，其單元格寬度變得可控了。預(yù)覽demo

在文本框中input/textarea中如果要改變光標(biāo)的顏色，可以通過設(shè)置文本的顏色color:#f00來搞定。但是假如我們只想改變光標(biāo)的顏色，而不想改變文本的顏色的話，caret-color屬性是一個(gè)實(shí)現(xiàn)方案。預(yù)覽demo

input,
textarea,
[contenteditable] {
  caret-color: red;
}

在遠(yuǎn)古時(shí)代，如果你不想讓別人選中你頁面的內(nèi)容，JavaScript是不可或缺的。而在文明社會(huì)中，只需要一句user-select:none的CSS樣式就可以解決。IE6-9不支持該屬性，可以通過給body添加 onselectstart="return false;"的內(nèi)聯(lián)JavaScript語句搞定。

body{
  user-select: none; //頁面中的文本不能被選中
}

Centering in the Unknown

caret-color

本文首發(fā)于我的博客