CSS中的多種居中方式

aristark 發布于2019-08-29 17:25 / 783人閱讀

摘要：同樣，需要水平居中就加上水平居中塊級元素，設置固定寬度，左右等于行級元素居中對塊級的父級使用，能讓內部的匿名行盒文字行內元素元素在父親里水平居中我的博客即將同步至騰訊云社區，邀請大家一同入駐

前言

CSS居中一直是我想要整理記錄的，拖了很久，今天就順便整理一下

居中的多種方式 flex布局居中

是我目前使用最多的一種方式，flex布局也是現在最方便的一種布局，廣泛用于pc端和移動端

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

grid布局居中

grid布局是一種比flex更加強大的布局，但是目前兼用性并不好，我使用的并不多，但也能實現居中

.container {
    display: grid;
    align-items: center;
    justify-content: center;
}

display: table-cell

傳統中比較新的方法，我用的不多，需要水平居中就加上 text-align: center;

.container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

絕對定位

傳統方法，適用于絕對定位

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

特殊的方法

利用vertical-align: middle的特性和中線對齊,用偽元素將內部撐高，需要水平居中就加上 text-align: center。

.container {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    text-align: center;
}
.container::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

簡單方法垂直居中

如果不加固定高度使用padding讓上下padding相等就可以實現垂直居中了，需要水平居中就加上 text-align: center，適用于一些較簡單的場景

.container {
    padding: 10px 40px;
    text-align: center;
}

單行文本固定行高垂直居中

如果需要固定高度，然后實現垂直居中，可以將高度設置成行高。同樣，需要水平居中就加上 text-align: center;

.container{
    line-height: 50px;
    text-align:center;
    height: 50px;
}

水平居中

塊級元素，設置固定寬度，左右margin等于auto

div{
    width: 200px;
    margin: 0 auto;
}

行級元素居中

對塊級的父級使用，能讓內部的匿名行盒(文字)、行內元素(span)、inline-block元素在父親里水平居中

.container{
    text-align: center;
}

我的博客即將同步至騰訊云+社區，邀請大家一同入駐：https://cloud.tencent.com/dev...

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

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

CSS中的多種居中方式

摘要：同樣，需要水平居中就加上水平居中塊級元素，設置固定寬度，左右等于行級元素居中對塊級的父級使用，能讓內部的匿名行盒文字行內元素元素在父親里水平居中我的博客即將同步至騰訊云社區，邀請大家一同入駐前言 CSS居中一直是我想要整理記錄的，拖了很久，今天就順便整理一下居中的多種方式 flex布局居中是我目前使用最多的一種方式，flex布局也是現在最方便的一種布局，廣泛用于pc端和移動端 ....

junfeng777 2019-08-02 12:08 評論0 收藏0
CSS3新增的偽類有哪些與居中div的多種方法

摘要：新增偽類有那些選擇屬于其父元素的首個元素選擇屬于其父元素的最后元素屬于父元素的特定類型的唯一子元素屬于父元素的唯一子元素的每個元素選擇父元素的第二個子元素在元素之前添加內容在元素之后添加內容已啟用控制表單為禁用狀態，不可點擊 CSS3新增偽類有那些？ p:first-of-type:選擇屬于其父元素的首個元素 p:last-of-type:選擇屬于其父元素的最后元素 p:only-o...

mcterry 2019-08-30 15:56 評論0 收藏0
CSS垂直居中，你會多少種寫法？

摘要：如果我們直接可以計算出正確的和值，豈不是一次到位函數正有此功能，當然我們需要知道子元素的寬高效果是一個作用于內聯元素的屬性。內聯元素的特性是會和其它內聯元素或者文字在同一行顯示，但是默認情況下是與父元素基線對齊的。 ??CSS控制居中是前端開發中非常常用的布局技能，本文列出幾種CSS控制元素居中的幾種方法。??談及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于H...

caohaoyu 2019-08-29 18:43 評論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