CSS中的多種居中方式

前言

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

居中的多種方式

flex佈局居中

是我目前使用最多的一種方式,flex佈局也是如今最方便的一種佈局,普遍用於pc端和移動端佈局

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

grid佈局居中

grid佈局是一種比flex更增強大的佈局,可是目前兼用性並很差,我使用的並很少,但也能實現居中flex

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

display: table-cell

傳統中比較新的方法,我用的很少,須要水平居中就加上 text-align: center;spa

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

絕對定位

傳統方法,適用於絕對定位code

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

特殊的方法

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

.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,適用於一些較簡單的場景get

.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元素在父親裏水平居中it

.container{
    text-align: center;
}

個人博客即將同步至騰訊雲+社區,邀請你們一同入駐:https://cloud.tencent.com/dev...

相關文章
相關標籤/搜索