开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情

前言：

成功没有捷径但成长有路径

css必备场景。专注积累，每天记录一个知识点，老概念新理解，重点记录一下

每天梳理一个场景，知识点查漏补缺，充实满足。

正文

背景

水平垂直居中，是前端开发中最常见最基础的应用场景，几乎是面试必问，一般同学都能想出几种方式，今天我们来总结下最常用的几种实现水平垂直居中的方式(居中的内容不限文字，可能是图片或者其他)。

方案

水平垂直居中基本是水平居中方式叠加了垂直居中放置，我们先来分开看下。

实现元素水平垂直居中的方式：

水平居中

margin:0 auto 块元素居中
定位 absolute
- +transform translate(-50%,-50%) 以自己为基准定位，加上调整位置
- +margin:负值
- +calc
table布局
css-table
flex布局
- align-items: center
- flex + margin:auto
grid布局

文本居中

text-align:center, height === line-height

行内元素

伪类

垂直居中

flex布局 justify-content：center
height === line-height 文本居中
定位同上

一种特殊实现

看需求我们可以选择不同的方式实现垂直水平居中，最常用的还是flex，

display:flex;
align-items: center;
justify-content：center;

这里代码介绍另一种最简单的，也是利用flex，不加其他属性的情况下，margin auto在水平垂直方向上自动分配。

flex + margin:auto

.parent {
  width:300px;
  height:300px;
  border:2px solid red;
  display:flex;
}
.child {
   width:100px;
   height:100px;
   border: 2px solid blue;
   margin:auto;
}

补充

上面代码都是针对块级元素，针对行内元素需要设置display：block，或者使用伪类这种方法

结语

一些比较经典的东西还是值得拿出来讲一讲的，人一直是成长的，每个时间段对同样的东西理解是不一样的，温故而知新，也帮自己理清一下思路。