垂直居中

dingding199389 發布于2019-08-29 12:42 / 3239人閱讀

摘要：基于絕對定位基于視口單位百分比行不通，因為的百分比值是以父元素的寬度作為解析基準的。沒錯，即使對于和來說也是這樣以下方法基于，，，單位，只適用于在視口中居中的場景。基于或注本文根據一書整理，便于查閱

基于絕對定位

main{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

基于視口單位

margin百分比行不通，因為margin的百分比值是以父元素的寬度作為解析基準的。沒錯，即使對于margin-top和margin-bottom來說也是這樣！

以下方法基于vw，vh，vmin，vmax單位，只適用于在視口中居中的場景。

main{
    margin:50vh auto 0;
    transform:translateY(-50%);
}

基于Flexbox

body{
    display:flex;
    min-height:100vh;
    margin:0;
}

main{
    margin:auto;
}

或

main{
    display:flex;
    align-items:center;
    justify-content:center;
    width:18em;
    height:10em
}

注：本文根據《css secret》一書整理，便于查閱

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

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

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

網頁設計的垂直居中

摘要：推薦閱讀原文原文鏈接網頁設計的垂直居中此系列為網頁設計中經常使用到的垂直居中解決方法，通過本文進行詳細地總結。推薦閱讀原文原文鏈接：網頁設計的垂直居中此系列為網頁設計中經常使用到的垂直居中解決方法，通過本文進行詳細地總結。使用line-height做垂直居中 See the Pen 使用line-height做垂直居中 by whjin (@whjin) on Co...

Scholer 2019-08-30 15:56 評論0 收藏0
水平居中、垂直居中、水平垂直居中、浮動居中、絕對定位居中.......幫你搞定

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

waterc 2019-08-29 15:32 評論0 收藏0
水平垂直居中

摘要：筆記整理之一水平垂直居中固定寬高一般使用負值進行居中不固定寬高一般使用和進行下面三種方案平常都很少被使用的到移動端一般使用方案在移動端都可以使用文本水平垂直居中文本垂直文本垂直居中移動端水平垂直居中垂直居中方案快級元素筆記整理之一：水平垂直居中 PC固定寬高、一般使用maring負值進行居中PC不固定寬高、一般使用relative和left進行下面三種方案平常都很少被使用的到 ...

incredible 2019-08-30 12:43 評論0 收藏0
水平垂直居中

摘要：筆記整理之一水平垂直居中固定寬高一般使用負值進行居中不固定寬高一般使用和進行下面三種方案平常都很少被使用的到移動端一般使用方案在移動端都可以使用文本水平垂直居中文本垂直文本垂直居中移動端水平垂直居中垂直居中方案快級元素筆記整理之一：水平垂直居中 PC固定寬高、一般使用maring負值進行居中PC不固定寬高、一般使用relative和left進行下面三種方案平常都很少被使用的到 ...

eechen 2019-08-01 14:54 評論0 收藏0
CSS-水平居中、垂直居中、水平垂直居中

摘要：水平居中水平居中可分為行內元素水平居中和塊級元素水平居中行內元素水平居中這里行內元素是指文本圖像按鈕超鏈接等，只需給父元素設置即可實現。 1、水平居中水平居中可分為行內元素水平居中和塊級元素水平居中 1.1 行內元素水平居中這里行內元素是指文本text、圖像img、按鈕超鏈接等，只需給父元素設置text-align:center即可實現。 .center{ te...

scwang90 2019-08-30 14:19 評論0 收藏0
CSS-水平居中、垂直居中、水平垂直居中

摘要：水平居中水平居中可分為行內元素水平居中和塊級元素水平居中行內元素水平居中這里行內元素是指文本圖像按鈕超鏈接等，只需給父元素設置即可實現。 1、水平居中水平居中可分為行內元素水平居中和塊級元素水平居中 1.1 行內元素水平居中這里行內元素是指文本text、圖像img、按鈕超鏈接等，只需給父元素設置text-align:center即可實現。 .center{ te...

Lsnsh 2019-08-02 10:04 評論0 收藏0