垂直水平居中是日常前端開發當中乙個常見的需求，在支援 css3 屬性的現代瀏覽器當中，有乙個利用 css3 屬性的垂直水平居中方法：
.center為了解釋原理，我們建立兩個元素:
#outer
#inner
可以看到紅色方塊左、上方距離外層方塊的距離都是250個畫素，如果我們想實現垂直水平居中，就應該將紅色方塊的中心點移動到目前元素左上角的位置，也就是分別向上和向左移動一半方塊邊長的長度，50個畫素。
#inner所以我們可以看到在 translate 函式當中使用百分比是以該元素的內容區、補白(padding)、邊框(border)為標準計算的，為了說明這一點，我們在 innner 元素加上一些 padding 和 border:
#inner可以看到 inner 元素一樣做到了垂直、水平居中。
利用CSS3的transition屬性實現滑動效果
首先援引一下w3school上的transition基本知識 定義和用法 transition 屬性是乙個簡寫屬性，用於設定四個過渡屬性 transition property transition duration transition timing function transition del...
利用css3實現箭頭
在一些開發中，經常會用到一些箭頭，如圖所示 要實現圖上的搶這個箭頭，傳統的做法就是切一張這樣的，然後最為背景圖就行了。但考慮到節約載入資源以及css3的強大特性，我們完全可以用css3來實現如圖需求。class info r class btn 搶span div info r 這樣就可以了。利用這...
CSS 3 實現水平垂直居中效果
在css中實現水平居中，會比較簡單。常見的，如果想實現inline元素或者inline block元素水平居中，可以在其父級塊級元素上設定 text align center實現 如果想實現塊級元素的水平居中對齊，可以設定magin auto。而如果想實現垂直居中對齊，或許就不太容易。以下，我總結了...