css水平居中和垂直居中

---

前言

---

一、水平居中

首先我们要知道水平居中可分为行内元素水平居中和块级元素水平居中。

1.行内元素水平居中

行内元素水平居中只需给父元素设置text-align:center即可实现。¹

代码如下（示例）：

2.块级元素水平居中

定宽块级元素水平居中

当块状元素有width值只需给需要居中的块级元素加margin:0 auto即可
代码如下（示例）：

不定宽块级元素水平居中

顾名思义不定宽就是块级元素的宽度不固定，这种居中有很多种方法，我们简单挑两种来说

1：设置table
通过给要居中显示的元素，设置display:table，然后设置margin:0 auto来实现
代码如下（示例）：

2：设置inline-block（在多个块状元素时使用）
子元素设置inline-block，同时父元素设置text-align:center
代码如下（示例）：

二、垂直居中

垂直居中有单行文本垂直居中、多行文本垂直居中和块级元素垂直居中

1.单行文本垂直居中

设置元素上内边距的宽度等于元素下内边距的宽度padding-top=padding-bottom；
或设置行高等于元素身的高度line-height=height；

2.多行文本垂直居中

通过设置父元素table，子元素table-cell和vertical-align²

代码如下（示例）：

3.块级元素垂直居中

flex布局
这个方法有一个要求：父元素必须显示设置height值
我们需要在垂直居中的父元素上，设置弹性布局display:flex并将元素位于容器的中心align-items：center

代码如下（示例）：

能力有限，文章难免会有不全面的问题，欢迎大家交流指正

---

1. 行内元素是指文本、图像、超链接等 ↩︎

2. vertical-align 属性设置元素的垂直对齐方式 ↩︎