垂直居中 absolute 和 flex 方法

luqiuwen 發(fā)布于2019-08-30 13:54 / 1818人閱讀

摘要：基于絕對(duì)定位不確定子元素寬高子元素確定固定寬高寬高不固定基于的解決方案或者直接設(shè)置不需要再給子元素設(shè)置樣式

基于絕對(duì)定位 absolute /不確定子元素寬高

1:子元素確定固定寬高

 .parent{
        position:relative;
      }
      
 .child{
        position:absolute;
        top:50%;
        width:18em;
        height:6em;
        margin-top:-3em;
        margin-left:-9em;
      }

2:寬高不固定

 .parent{
        position:relative;
      }

 .child{
         position:absolute;
         top:50%;
         height:50%;
         transform:translate(-50%,-50%);
      }

基于Flexbox的解決方案

 .parent{
        display:flex;

    }
 .child{
        margin:auto;
    }

或者直接設(shè)置align-items,不需要再給子元素設(shè)置樣式

    
  .parent{
        display:flex;
        align-items:center;
    }

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115626.html

相關(guān)文章

水平居中、垂直居中、水平垂直居中、浮動(dòng)居中、絕對(duì)定位居中.......幫你搞定

摘要：包括水平居中，垂直居中，還有水平垂直居中。如果要再要細(xì)分，還要分浮動(dòng)元素絕對(duì)定位的居中。樣式水平居中的元素圖片的水平居中圖片的居中，比較特殊。 2018.05.29 居中一個(gè)元素？你會(huì)想到啥？這里面的知識(shí)還真不少。包括水平居中，垂直居中，還有水平垂直居中。如果要再要細(xì)分，還要分浮動(dòng)元素、絕對(duì)定位的居中。為了代碼簡(jiǎn)介，沒有加背景和其他樣式，需要看效果的，可以加上背景。目錄：第一...

waterc 2019-08-29 15:32 評(píng)論0 收藏0
如何居中一個(gè)元素（終結(jié)版）

摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級(jí)元素上設(shè)置，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。前言本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導(dǎo)圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導(dǎo)圖，請(qǐng)猛戳Github個(gè)人博客一、水平居中 1.行內(nèi)元素水平居...

Hydrogen 2019-08-29 16:56 評(píng)論0 收藏0
如何居中一個(gè)元素（終結(jié)版）

摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級(jí)元素上設(shè)置，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。前言本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導(dǎo)圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導(dǎo)圖，請(qǐng)猛戳Github個(gè)人博客一、水平居中 1.行內(nèi)元素水平居...

hlcc 2019-08-02 11:43 評(píng)論0 收藏0
如何居中一個(gè)元素（終結(jié)版）

摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級(jí)元素上設(shè)置，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。前言本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導(dǎo)圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導(dǎo)圖，請(qǐng)猛戳Github個(gè)人博客一、水平居中 1.行內(nèi)元素水平居...

Meils 2019-08-23 12:20 評(píng)論0 收藏0
css-元素居中

摘要：一水平居中行內(nèi)元素水平居中使用屬性可以實(shí)現(xiàn)在行內(nèi)元素包括在塊級(jí)父元素水平居中。使用負(fù)已知高度寬度使用使用使用三水平垂直居中公共結(jié)構(gòu)塊級(jí)元素垂直居中。本文重要是匯總了關(guān)于水平居中，垂直居中，還有水平垂直居中的各種方法。一、水平居中 1.行內(nèi)元素水平居中使用text-align:center;屬性可以實(shí)現(xiàn)在行內(nèi)元素（包括：inline,inline-block、inline-tabl...

miqt 2019-08-29 18:39 評(píng)論0 收藏0
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 評(píng)論0 收藏0