亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS中垂直居中的簡單實現(xiàn)方法

大步's blog   發(fā)布時間：2015-07-06 18:18:34   作者：佚名   我要評論
這篇文章主要介紹了CSS中垂直居中的簡單實現(xiàn)方法,包括用CSS3中用transform來實現(xiàn)的例子,需要的朋友可以參考下

大家都知道css里面用text-align:center加上margin:0 auto就可以實現(xiàn)水平居中了，但是垂直居中卻沒有相應的css屬性來設置，而如果要設置元素能夠垂直居中必須得將容器設置為display:table，然后將子元素也就是要垂直居中顯示的元素設置為display:table-cell，然后加上vertical-align:middle來實現(xiàn)。
通過CSS3的transform來實現(xiàn)

CSS Code復制內(nèi)容到剪貼板
  1. .center-vertical {   
  2.   position: relative;   
  3.   top: 50%;   
  4.   transform: translateY(-50%);   
  5. }   
  6. .center-horizontal {   
  7.   position: relative;   
  8.   left: 50%;   
  9.   transform: translateX(-50%);    
  10. }     


相關(guān)文章

  • css實現(xiàn)元素水平垂直居中常見的兩種方式實例詳解

    這篇文章主要給大家介紹了css實現(xiàn)元素水平垂直居中的兩種方式，文中給出了完整的示例代碼供大家參考學習，對大家的學習或者工作具有一定的參考價值，有需要的朋友們下面來
    2017-04-23

  • CSS水平垂直居中的幾種方法總結(jié)

    這篇文章主要介紹了CSS水平垂直居中的幾種方法總結(jié),垂直居中是布局中十分常見的效果之一,本文介紹了幾種方法，有興趣的可以了解一下。
    2016-12-19

  • css讓容器水平垂直居中的7種方式

    這篇文章主要為大家詳細介紹了css讓容器水平垂直居中的7種方式,具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-10-17

  • 利用CSS3的flexbox實現(xiàn)水平垂直居中與三列等高布局

    這篇文章給大家介紹了三個小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實現(xiàn)水平垂直居中對齊和三列等高自適應頁腳區(qū)域黏附底部的布局，有需要的可以參考
    2016-09-12

  • CSS設置文字圖片垂直居中的方法總結(jié)

    這篇文章給大家演示了在不知道高度的情況下圖片如何垂直居中對齊，文中給出了實例代碼，有需要的朋友們可以參考借鑒。下面來一起看看吧。
    2016-09-12

  • CSS定位“十字架”之水平垂直居中

    這篇文章主要介紹了CSS定位“十字架”之水平垂直居中的相關(guān)資料，CSS如何定位“十字架”實現(xiàn)水平垂直居中效果，小編為大家解答，感興趣的小伙伴們可以參考一下
    2016-03-02

  • CSS實現(xiàn)同一行的圖片和文字垂直居中對齊的方法

    這篇文章主要為大家介紹了CSS實現(xiàn)同一行的圖片和文字垂直居中對齊的方法,涉及css中vertical-align:middle屬性的使用技巧,需要的朋友可以參考下
    2015-05-12

  • CSS垂直居中實現(xiàn)方法大全

    本文給大家?guī)淼氖?種使用CSS實現(xiàn)垂直居中的方法，雖然各有優(yōu)缺點，但還都是蠻實用的，小伙伴們根據(jù)自己的項目情況，自由選擇吧。
    2015-01-09

  • CSS實現(xiàn)垂直居中的4種思路詳解

    這篇文章給大家整理四種css實現(xiàn)垂直居中效果，思路明了非常不錯，具有參考借鑒價值，需要的朋友參考下吧
    2017-09-06

最新評論