CSS中的多種居中方式

樑廣銘發表於2018-11-28
CSS

前言

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…

相關文章