css实现元素的水平垂直居中

网页设计中经常会遇到各种各样的需求，要求实现元素的垂直居中， 这是一个什么宽泛的话题，对应了许多的解决方案
flex下面就不涉及了，这个实现水平垂直居中比较简单， 下面介绍的思路为

一. 水平居中

• 行内元素的水平居中
• block元素的水平居中
• 多个内联元素的水平居中

二. 垂直居中

• 行内元素的垂直居中
• block元素的垂直居中

三. 水平垂直居中

• 父元素和子元素的大小都知道
• 父元素的大小未知, 子元素的大小已知
• 父元素和子元素的大小都不知道
• 其他的小技巧

水平居中

行内元素的水平居中

行内元素的水平居中: 核心 text-align:center

<div style="text-align: center;width:100px; height: 80px; border: 1px solid gray;">
    <a>aaa</a>
</div>

Paste_Image.png

block元素的水平中

block元素的宽度必须固定: 核心width:100px; margin:0 auto;

<div style="width:200px; height: 80px; border: 1px solid gray;">
    <div style="width:100px; margin:0 auto; height: 20px;background: red"></div>
</div>

Paste_Image.png

这个的原理是对于 长规则流中块级元素, 水平方向 而言,浏览器会自动的把这个个元素的margin-left border-left padding-left width border-right padding-right margin-rignt 等于父容器的width, 这里宽度固定
, margin直拉伸。可惜 垂直方向 上面并不是如此（ps: padding: 0 auto可不可以呢？是不可以的 padding：auto自动解释为继承浏览器的padding）

问题来了： 如果块级元素的宽度不知道呢？
就从布局上面而言，这个需求是比较少的，因为布局的一般原则就是 固定宽度的值，高度
由子元素撑开。

当然 如果非得讨论这种情况的话，也是可以有不同的方法的。默认情况下, 如果不设置块级元素的宽度，那么它的宽度默认为自适应父元素的width

<div style="width:200px; height: 80px; border: 1px solid gray;">
    <div style="margin: 0;height: 20px;background: red">aaaa</div>
</div>

Paste_Image.png

如上 margin: 0为零时，它的width自动填充100%; 这里都是按照正常流中块的计算规则过来的，width优先
如果想要里面的aaaa 居中的话 直接套用text-align： center即可

<div style="width:200px; height: 80px; border: 1px solid gray;">
    <div style="text-align: center;margin: 0;height: 20px;background: red">aaaa</div>
</div>

Paste_Image.png

如果它里面又是一个 块级元素的话 又重新利用margin: 0 atuo原则即可

多个内联块的居中

同理 text-align: center

<div style="text-align:center;width:200px; height: 80px; border: 1px solid gray;">
    <button>click</button>
    <button>click</button>
</div>

Paste_Image.png

垂直居中

行内元素的垂直居中

一般来说，布局的基本思想是高度由内容撑起，所以父元素可以不用设置高度，那么
行内元素如果居中呢？ 有一个思路是padding，让其看起来居中

<div>
    <span style="padding: 5px 10px; border: 1px solid red">假装居中</span>
</div>

Paste_Image.png

当然 行内元素常用的方式还有 height = lineheight

<div style="width:200px; height: 50px; line-height: 50px; border: 1px solid red">
    <span>居中</span>
</div>

Paste_Image.png

这样做能成功的利用是，元素默认排列在行的中间，height为lineheight的高度的话，即只有一行行内元素也就居中了

考虑上面height是否有存在的必要性呢？其实是没有的，

<div style="line-height: 50px; border: 1px solid red">
    <span>居中</span>
</div>

把height去掉的效果也一样

vertical-align

css的这个属性是是大多数人都会用错的一个属性，它只能用在两种元素上面 table-cell
和内联元素
对应 table-cell来说，可以比较容易直观的实现垂直居中, 而且对块元素和行内元素都效果

<div style="display: table-cell; vertical-align: middle; height: 150px; width: 150px; border: 1px solid red">
    <div style="border: 1px solid gray">div居中了</div>
</div>

<div style="display: table-cell; vertical-align: middle; height: 150px; width: 150px; border: 1px solid red">
    <span style="border: 1px solid gray">span居中了</span>
</div>

Paste_Image.png

vertial-align对于内联元素

这个知识点比较难，许多人都能明白vertial-align到底是如何起作用的， 这里重点讲一下
首先下面是非常重要的几点

• 行内元素的默认排列方式为baseline对齐

  什么是baseline呢？ 其实就是文字的底部（比如英语写法 c g）这个baseline的话 就是c的底部

  
  Paste_Image.png

  解释一下上面的现象， 为何出现两边居中了，之前说过，vertial-align改变的是自己 和其他元素的对齐方式，中间的元素B为inline-block 可以设置高度，这里把它的高度设置为100%,即容器高度。它参与行内排序对齐使用的是middle对齐，也就是说，A span在对齐的时候，利用它的baseline和中间的B的中线（即处再中间高度的横向）进行对齐，同理B在进行对齐时利用它的中线和C的baseline进行对齐。

  • 在测试一下bottom，这个对齐方式是利用元素的底部和其他元素对象

      <div style="height: 150px; width: 300px; border: 1px solid red; margin-bottom: 10px">
          <span style="padding: 10px; border: 1px solid gray; vertical-align: bottom">A</span>
          <div style="border: 1px solid gray; display: inline-block; height: 50%;">
          B</div>
                  <div style="border: 1px solid gray; display: inline-block; height: 50%;">
          B</div>
      </div>
  

  Paste_Image.png
  • ghost element 实现居中技术
  • block实现垂直居中
    利用绝对定位

  <div style="position:relative; width: 100px; height:100px; border: 1px solid red">
      <div style="position: absolute; top: 50%; transform: translateY(-50%); 
                              width: 20px; height:20px;border: 1px solid red">
      </div>
  </div>
  

  Paste_Image.png

  原理的话 下面会说

  水平垂直

  • 对应父元素大小不定，子元素的大小也不定的情况下

  这里给出父和子的大小 只是为了显示出来看而已，这种方法不用确实父和子的大小的

  <div style="position:relative; width: 100px; height:100px; border: 1px solid red">
      <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
                              width: 20px; height:20px;border: 1px solid red">
      </div>
  </div>
  

  Paste_Image.png

  原理呢？ 这个原理是利用了绝对定位的百分比和变形的百分比不同使用的, 绝对定位的百分比相对父元素，
  而变形的百分比相对子元素本身大小

  • 父元素大小不定，子元素大小固定

  核心代码 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto

  <div style="position:relative; width: 100px; height:100px; border: 1px solid red">
      <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
                              width: 20px; height:20px;border: 1px solid red">
      </div>
  </div>
  

  Paste_Image.png

  原理是 根据css2的规范，在一个绝对定位的块中, 水平方向上面
  margin + padding + border + width + left +right 为父的宽度, 最重要的为left, margin这里的话为
  auto 会自动作用均值计算，然后得到居中 同理height也是一样