前言

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

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：