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...