垂直居中 absolute 和 flex 方法

luqiuwen 發布于2019-08-30 13:54 / 1808人閱讀

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

基于絕對定位 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;
    }

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

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

GPU云服務器云服務器 absolute居中垂直居中實現垂直居中水平垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115626.html

水平居中、垂直居中、水平垂直居中、浮動居中、絕對定位居中.......幫你搞定

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

waterc 2019-08-29 15:32 評論0 收藏0
如何居中一個元素（終結版）

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

Hydrogen 2019-08-29 16:56 評論0 收藏0
如何居中一個元素（終結版）

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

hlcc 2019-08-02 11:43 評論0 收藏0
如何居中一個元素（終結版）

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

Meils 2019-08-23 12:20 評論0 收藏0
css-元素居中

摘要：一水平居中行內元素水平居中使用屬性可以實現在行內元素包括在塊級父元素水平居中。使用負已知高度寬度使用使用使用三水平垂直居中公共結構塊級元素垂直居中。本文重要是匯總了關于水平居中，垂直居中，還有水平垂直居中的各種方法。一、水平居中 1.行內元素水平居中使用text-align:center;屬性可以實現在行內元素（包括：inline,inline-block、inline-tabl...

miqt 2019-08-29 18:39 評論0 收藏0
CSS居中完全指南——構建CSS居中決策樹

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

cc17 2019-08-02 10:11 評論0 收藏0