CSS中垂直居中的簡(jiǎn)單實(shí)現(xiàn)方法
大步's blog 發(fā)布時(shí)間：2015-07-06 18:18:34 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS中垂直居中的簡(jiǎn)單實(shí)現(xiàn)方法,包括用CSS3中用transform來實(shí)現(xiàn)的例子,需要的朋友可以參考下
大家都知道css里面用text-align:center加上margin:0 auto就可以實(shí)現(xiàn)水平居中了，但是垂直居中卻沒有相應(yīng)的css屬性來設(shè)置，而如果要設(shè)置元素能夠垂直居中必須得將容器設(shè)置為display:table，然后將子元素也就是要垂直居中顯示的元素設(shè)置為display:table-cell，然后加上vertical-align:middle來實(shí)現(xiàn)。
通過CSS3的transform來實(shí)現(xiàn)
CSS Code復(fù)制內(nèi)容到剪貼板
- .center-vertical {
- position: relative;
- top: 50%;
- transform: translateY(-50%);
- }
- .center-horizontal {
- position: relative;
- left: 50%;
- transform: translateX(-50%);
- }
相關(guān)文章
css實(shí)現(xiàn)元素水平垂直居中常見的兩種方式實(shí)例詳解
這篇文章主要給大家介紹了css實(shí)現(xiàn)元素水平垂直居中的兩種方式，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考價(jià)值，有需要的朋友們下面來2017-04-23- 這篇文章主要介紹了CSS水平垂直居中的幾種方法總結(jié),垂直居中是布局中十分常見的效果之一,本文介紹了幾種方法，有興趣的可以了解一下。2016-12-19
- 這篇文章主要為大家詳細(xì)介紹了css讓容器水平垂直居中的7種方式,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-17
利用CSS3的flexbox實(shí)現(xiàn)水平垂直居中與三列等高布局
這篇文章給大家介紹了三個(gè)小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實(shí)現(xiàn)水平垂直居中對(duì)齊和三列等高自適應(yīng)頁腳區(qū)域黏附底部的布局，有需要的可以參考2016-09-12- 這篇文章給大家演示了在不知道高度的情況下圖片如何垂直居中對(duì)齊，文中給出了實(shí)例代碼，有需要的朋友們可以參考借鑒。下面來一起看看吧。2016-09-12
- 這篇文章主要介紹了CSS定位“十字架”之水平垂直居中的相關(guān)資料，CSS如何定位“十字架”實(shí)現(xiàn)水平垂直居中效果，小編為大家解答，感興趣的小伙伴們可以參考一下2016-03-02
CSS實(shí)現(xiàn)同一行的圖片和文字垂直居中對(duì)齊的方法
這篇文章主要為大家介紹了CSS實(shí)現(xiàn)同一行的圖片和文字垂直居中對(duì)齊的方法,涉及css中vertical-align:middle屬性的使用技巧,需要的朋友可以參考下2015-05-12- 本文給大家?guī)淼氖?種使用CSS實(shí)現(xiàn)垂直居中的方法，雖然各有優(yōu)缺點(diǎn)，但還都是蠻實(shí)用的，小伙伴們根據(jù)自己的項(xiàng)目情況，自由選擇吧。2015-01-09
這篇文章給大家整理四種css實(shí)現(xiàn)垂直居中效果，思路明了非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-06
