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

更多专业前端知识，请上【猿2048】www.mk2048.com