純css怎么設(shè)置?水平居中

這篇文章主要介紹“純css怎么設(shè)置水平居中”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“純css怎么設(shè)置水平居中”文章能幫助大家解決問題。

水平居中

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;
}

css的基本語法是什么

css的基本語法是：

1、css規(guī)則由選擇器和一條或多條聲明兩個部分構(gòu)成；

2、選擇器通常是需要改變樣式的HTML元素；

3、每條聲明由一個屬性和一個值組成；

4、屬性和屬性值被冒號分隔開。

關(guān)于“純css怎么設(shè)置水平居中”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。