扒一扒元素水平垂直居中的实现方法

元素水平居中

我们先来看看如何实现水平居中，我们可以从行内元素、确定宽度的块级元素和宽度未知的块级元素这几点来分析：

对于行内元素，我们可以直接使用文字水平居中 text-align: center; 实现水平居中

对于宽度已知的块级元素 ：

⒈版心居中 margin: 0 auto; 实现 => 原理很简单，设置水平方向左右边距auto，会自动居中布局

⒉margin-left实现 margin-left: (父级宽度 - 自己宽度)/2;

原理也很简单，我们可以转化为如下的数学问题：
已知AB，AC的长度，O为AB中点，D为AC中点，求DO的长度？（这里的AC可以理解为我们宽度已知的块级元素，AB为此元素的父级元素，想要实现水平居中，线段上分析即将AC这一长度平移至AB的中间段，也就是D点到O点的距离） → 从图中分析，我们不难看出水平移动的距离，也就是我们的父级宽度减去自己宽度后的一半。

⒊绝对定位方式实现 position: absolute; left: (父级宽度 - 自己宽度)/2; 原理同上

⒋……

那么对于宽度未知的块级元素：

⒈table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为 display: table），再通过给该标签添加左右margin为auto。

⒉flex布局使用 justify-content:center

⒊……

实现元素水平居中
行内元素	text-align: center;
宽度已知的块级元素	margin: 0 auto; margin-left实现 margin-left: (父级宽度 - 自己宽度)/2; 绝对定位实现 position: absolute; left: (父级宽度 - 自己宽度)/2; ……
宽度未知的块级元素	display: table; margin: 0 auto; display: flex; justify-content: center; ……

元素垂直居中

我们再来看元素的垂直居中：

利用行高 line-height: 盒子高度; 实现文本类垂直居中效果，值设定为要垂直居中盒子的高度
弹性布局flex，父级设置 display: flex; 子级设置 margin: auto;
弹性布局flex，父级设置 display: flex; align-items: center;
……

⭐ 元素水平垂直居中

现在就很明了了，那么综上所述，元素水平垂直居中的实现方式有：

⒈文字水平垂直居中：text-align: center;line-height: 盒子高度;

⒉div水平垂直居中_Flex布局

父 display: flex; justify-content: center; align-items: center;
父 display: flex; 子 margin: auto;

⒊div水平垂直居中_table布局

父 display: table-cell; vertical-align: middle; text-align: center; 子 display: inline-block; → 块水平垂直居中
父 display: table; text-align: center; 子 display: table-cell; vertical-align: middle; → 块里的多行文字水平垂直居中

⒋div水平垂直居中_绝对定位

绝对定位 + calc 计算偏移量（宽高已知）：
- 子 position: absolute;top: calc((100% - 高度)/2);left: calc((100% - 宽度)/2); 原理类似上文提到的数学问题，这里的100%相当于父级的宽度高度
- 父 position: relative;（非必需）
绝对定位 + margin负值属性（宽高已知）：
- 子 position: absolute; top: 50%; left: 50%; margin-top: -高度的一半; margin-left: -宽度的一半;
- 父 position: relative;（非必需，若未设置则相对浏览器窗口而定）
绝对定位 + transform属性：
- 子 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
- 父 position: relative;（非必需）
绝对定位 + margin: auto;属性：
- 子 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; 父 position: relative;（非必需）
- 原理说明：
  - 当设置绝对定位未设margin: auto时，此时布局定位依旧在左上角，因为虽然定位脱离了文档流但是top的bottom的值是相等的。根据优先级会自动向上对齐。同理左右也是如此。
  - margin: auto会自动去计算子元素和父元素之间的边距，并设为居中。（margin: auto 默认只计算左右边距，上下auto时默认取0 → margin: auto;和margin: 0 auto;一般情况下无区别，并不能实现垂直居中，当设绝对定位后，margin-top和margin-bottom值不是0了，计算所得后可以实现垂直居中）

具体实现代码如下：

文本水平垂直居中实现

<!-- 文本水平垂直居中 -->
<html>
  <head>
    <meta charset="UTF-8">
	<title>Title</title>
    <style>
      .text {
          width: 200px;
          height: 200px;
          text-align: center;
          line-height: 200px;
          background-color: #6ea8fe;
      }
    </style>
  </head>
  <body>
    <div class="text">文本水平垂直居中</div>
  </body>
</html>

水平垂直居中实现

水平垂直居中_flex布局

<html>
  <head>
    <meta charset="UTF-8">
	<title>Title</title>
    <style>
      .parent {
          width: 800px;
          height: 400px;
          background-color: rgba(0, 0, 0, .2);
          display: flex;
          justify-content: center;
          align-items: center;
      }
      .text {
          width: 200px;
          height: 200px;
          background-color: #6ea8fe;
      }
    </style>
  </head>
  <body>
    <div class="parent">
		<div class="text">水平垂直居中</div>
	</div>
  </body>
</html>

水平垂直居中_table布局

<html>
  <head>
    <meta charset="UTF-8">
	<title>Title</title>
    <style>
      .parent {
          width: 800px;
          height: 400px;
          background-color: rgba(0, 0, 0, .2);
          display: table-cell;
          text-align: center;
          vertical-align: middle;
      }
      .text {
          display: inline-block;
          width: 200px;
          height: 200px;
          background-color: #6ea8fe;
      }
    </style>
  </head>
  <body>
    <div class="parent">
		<div class="text">水平垂直居中</div>
	</div>
  </body>
</html>

<html>
  <head>
    <meta charset="UTF-8">
	<title>Title</title>
    <style>
      .parent {
          width: 800px;
          height: 400px;
          background-color: rgba(0, 0, 0, .2);
          display: table;
          text-align: center;
      }
      .text {
          display: table-cell;
          vertical-align: middle;
          background-color: #6ea8fe;
      }
    </style>
  </head>
  <body>
    <div class="parent">
		<div class="text">党在当代社会指的是以某种政治目的、思想认同而结成有纪律、有组织，并维护该机构或集团的利益的组织。同时，在中国、朝鲜、古巴等国，党特指代表人民的执政党。</div>
	</div>
  </body>
</html>

水平垂直居中_定位


<html>
  <head>
    <meta charset="UTF-8">
	<title>Title</title>
    <style>
      .parent {
          position: relative;
          width: 800px;
          height: 400px;
          background-color: rgba(0, 0, 0, .2);
      }
      .text {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -100px;
          margin-left: -100px;
          width: 200px;
          height: 200px;
          background-color: #6ea8fe;
      }
	  /*  绝对定位 + transform */
/*       .text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 200px;
          height: 200px;
          background-color: #6ea8fe;
      } */
      /* 绝对定位 + margin: auto */
/*       .text {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          width: 200px;
          height: 200px;
          background-color: #6ea8fe;
      } */
      /*  绝对定位 + calc计算偏移量 */
/*       .text {
          position: absolute;
          left: calc((100% - 200px) / 2);
          top: calc((100% - 200px) / 2);
          width: 200px;
          height: 200px;
          background-color: #6ea8fe;
      } */
    </style>
  </head>
  <body>
    <div class="parent">
		<div class="text">水平垂直居中</div>
	</div>
  </body>
</html>

题外话

通过上文我们知道了一些使元素水平垂直居中的实现方式，当然上述仅做示例，它的居中方式也并不局限于以上几种，大家可以开动自己的小脑瓜子想一想~

废话不多说，这里呢，是想拓展一点关于 图片和文字的垂直居中对齐：一般是给高度大的一方（大部分情况下是图片）设置 vertical-align: middle;

为什么要这么做呢？

是因为浏览器把行内块、行内标签当做文字处理，默认按基线对齐

基线对齐就会产生一些问题：

⒈造成图片文字同行排列不齐，如何使得图片文字垂直居中？

给高度大的一方设置 vertical-align: middle; 一般是给图片设置

⒉图片img底部会有空白，如何消除图片底部留白？

图片转显示模式为块级不按基线对齐 display: block;
设置其他垂直对齐方式