CSS垂直居中

NeverSayNever 發(fā)布于2019-08-28 18:07 / 654人閱讀

摘要：大家都知道里面用加上就可以實(shí)現(xiàn)水平居中了，但是垂直居中卻沒有相應(yīng)的屬性來設(shè)置，而如果要設(shè)置元素能夠垂直居中必須得將容器設(shè)置為，然后將子元素也就是要垂直居中顯示的元素設(shè)置為，然后加上來實(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)

.center-vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.center-horizontal {
  position: relative;
  left: 50%;
  transform: translateX(-50%); 
}

GPU云服務(wù)器云服務(wù)器垂直居中實(shí)現(xiàn)垂直居中水平垂直居中文字垂直居中

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111026.html

相關(guān)文章

CSS居中完全指南——構(gòu)建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹,下次再遇到...

cc17 2019-08-02 10:11 評論0 收藏0
CSS居中完全指南——構(gòu)建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹,下次再遇到...

AlienZHOU 2019-08-30 15:53 評論0 收藏0
【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實(shí)現(xiàn)在塊級元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對內(nèi)聯(lián)元素內(nèi)聯(lián)塊內(nèi)聯(lián)表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內(nèi)聯(lián)元素垂直居中通過設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經(jīng)常要面對的問題，也是基本技能之一。今天有時(shí)間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Apollo 2019-08-30 14:15 評論0 收藏0
CSS垂直居中的七個(gè)方法

摘要：下面的會造成這種樣子的垂直居中因此，如果有一個(gè)方塊變成了高度，那么其他的方塊就會真正的垂直居中。使用使用或的屬性，輕輕松松就可以做到垂直居中的效果。我們在編輯一個(gè)版面，通常都會用到水平居中和垂直居中來設(shè)計(jì)，而水平居中很好處理，不外乎就是設(shè)定margin:0 auto；或是text-align:center；，就可以輕松解決掉水平居中的問題，但一直以來最麻煩對齊問題，都是垂直居中這個(gè)討...

mingzhong 2019-08-02 16:15 評論0 收藏0
CSS垂直居中的七個(gè)方法

摘要：下面的會造成這種樣子的垂直居中因此，如果有一個(gè)方塊變成了高度，那么其他的方塊就會真正的垂直居中。使用使用或的屬性，輕輕松松就可以做到垂直居中的效果。我們在編輯一個(gè)版面，通常都會用到水平居中和垂直居中來設(shè)計(jì)，而水平居中很好處理，不外乎就是設(shè)定margin:0 auto；或是text-align:center；，就可以輕松解決掉水平居中的問題，但一直以來最麻煩對齊問題，都是垂直居中這個(gè)討...

cheng10 2019-08-29 18:47 評論0 收藏0
【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實(shí)現(xiàn)在塊級元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對內(nèi)聯(lián)元素內(nèi)聯(lián)塊內(nèi)聯(lián)表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內(nèi)聯(lián)元素垂直居中通過設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經(jīng)常要面對的問題，也是基本技能之一。今天有時(shí)間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Scholer 2019-08-02 16:14 評論0 收藏0