前端面试题：如何让元素水平垂直居中？

前言

一篇学习回顾，知识总结的博客。

一、行内元素

行内元素最常使用的就是<span>，其他的只在特定功能下使用，修饰字体<b>和<i>标签，还有<sub>和<sup>这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。

1.行内元素特征

(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行

2.行内水平垂直居中

/*给父元素设置*/
水平居中   text-align: center;

/*  1.子元素 line-height 值为父元素 height 值  */
/*  2.单行文本  */
垂直居中 line-height 等于 height

例子：

二、块状元素

块状元素代表性的就是<div>，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。

1.块状元素特征

(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下

2.块状元素水平垂直居中

方法1：

父元素：
      display: table-cell;
      vertical-align: middle;

子元素：
      margin-left: （父元素宽度-子元素宽度）/2;

例子：

方法2：

绝对定位 position: absolute;
注意：子绝父相

给子元素添加
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

优点：无论绝对定位元素的尺寸是多少，它都是水平垂直居中显示的。
缺点：就是兼容性问题。

例子：

方法3：

/* 注意：子绝父相 */
给子元素添加
  position: absolute;
  width: 宽度;
  height: 高度;
  left: 50%;
  top: 50%;
  margin-left: -0.5*宽度;
  margin-top: -0.5高度;

缺点：需要提前知道元素的尺寸。

例子：

方法4：

给父元素添加
flex弹性盒子
display: flex;
align-items: center;
justify-content: center;

例子：

方法5：

给子元素添加
position: absolute及margin：auto

例子：

---

总结

这些水平垂直居中方法，都是前端时间学习的过程中用到的过的方法，现在复习总结一下。