欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css 不定寬高的元素居中布局解決方案

  發(fā)布時間：2019-09-18 16:39:02   作者：sunshine   我要評論
這篇文章主要介紹了css 不定寬高的元素居中布局解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1. 水平居中

公共代碼:

html:

<div class="parent">
    parent
    <br>
    <div class="child">
        child
    </div>
</div>

css:

html, body {
    margin: 0;
    width: 100%;
    height: 100%;

    .parent {
        width: 100%;
        height: 100%;
        background: #fac3fa;
        
        .child {
            width: 50%;
            height: 50%;
            background: #fe9d38;
        }
    }
}

方案一: text-align(父) + inline-block(子)

代碼:
css:

.parent {
    text-align: center;

    .child {
        display: inline-block;
    }
}

方案二: 塊級元素 + margin: 0 auto;

.child {
    display: block; // 非塊級元素時設(shè)置
    margin: 0 auto;
}

方案三: absolute + transform

.parent {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

方案四: flex

注: 由于使用flex的關(guān)系, 這里去掉了 parent 和<br>

.parent {
    display: flex;
    justify-content: center;
}

2. 垂直居中

公共代碼:
html:

<div class="parent">
    <div class="child"></div>
</div>

css:

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
}
.parent {
    display: table-cell;
    width: 800px;
    height: 500px;
    background: #fac3fa;

    .child {
        width: 50%;
        height: 50%;
        background: #fe9d38;
    }
}

方案一: table-cell(父) + vertical-align(子)

.parent {
    display: table-cell;
    vertical-align: middle;
}

方案二: absolute + transform

.parent {
    position: relative;
    
    .child {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
}

方案三: flex

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

3. 水平垂直居中

公共代碼同[垂直居中]

常用方案一: absolute + transform

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

常用方案二: flex

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • css實現(xiàn)元素居中的N種方法

    這篇文章主要介紹了css實現(xiàn)元素居中的N種方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-02-02

  • css實現(xiàn)元素垂直居中顯示的7種方式

    這篇文章主要介紹了css實現(xiàn)元素垂直居中顯示的7種方式,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)
    2020-09-04

  • CSS實現(xiàn)子元素div水平垂直居中的示例

    這篇文章主要介紹了CSS實現(xiàn)子元素div水平垂直居中的示例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起
    2020-09-03

  • CSS自適應(yīng)布局實現(xiàn)子元素項目整體居中，內(nèi)部項目左對齊

    這篇文章主要介紹了CSS自適應(yīng)布局實現(xiàn)子元素項目整體居中，內(nèi)部項目左對齊，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們
    2019-09-03

  • css常用元素水平垂直居中方案

    這篇文章主要介紹了css常用元素水平垂直居中方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)
    2019-08-09

  • css實現(xiàn)元素垂直居中的常用方法(總結(jié))

    本文給大家分享幾種方法介紹css實現(xiàn)元素垂直居中的常用方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
    2019-04-01

  • CSS實現(xiàn)元素居中原理解析

    在 CSS 中要設(shè)置元素水平垂直居中是一個非常常見的需求了。這篇文章主要介紹了CSS實現(xiàn)元素居中原理解析，本文分別從行內(nèi)元素和塊級元素進(jìn)行說明，具有一定的參考價值，感興
    2018-10-18

  • 利用css設(shè)置元素垂直居中的解決方法匯總

    作為前端攻城師，在制作Web頁面時都有碰到CSS制作水平垂直居中，我想大家都有研究過或者寫過，特別的其中的垂直居中，更是讓人煩惱，下面這篇文章主要給大家匯總介紹了關(guān)于
    2017-09-12

  • css實現(xiàn)元素水平垂直居中常見的兩種方式實例詳解

    這篇文章主要給大家介紹了css實現(xiàn)元素水平垂直居中的兩種方式，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，對大家的學(xué)習(xí)或者工作具有一定的參考價值，有需要的朋友們下面來
    2017-04-23

  • 關(guān)于css 行元素和塊元素 相互轉(zhuǎn)換 居中

    下面小編就為大家?guī)硪黄P(guān)于css 行元素和塊元素 相互轉(zhuǎn)換 居中。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-05

最新評論