垂直水平居中

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

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

一. 水平居中

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

二. 垂直居中

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

三. 水平垂直居中

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

水平居中

行内元素的水平居中

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

    aaa

Paste_Image.png

block元素的水平中

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

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

    
aaaa

Paste_Image.png

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

    
aaaa

Paste_Image.png

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

多个内联块的居中

同理 text-align: center

    click
    click

Paste_Image.png

垂直居中

行内元素的垂直居中

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

    假装居中

Paste_Image.png

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

    居中

Paste_Image.png

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

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

    居中

把height去掉的效果也一样

vertical-align

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

    
div居中了



    span居中了

Paste_Image.png

vertial-align对于内联元素

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

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

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

  
  
  

• vertial-align的作用是, 改变自己参与的对齐方式。注意是改变自己。内联元素默认都是利用baseline和
  其他元素对齐, vertial-align恰恰是可以改变自己的这种对齐方式的

    span居中了
    
span居中了
    span居中了

Paste_Image.png

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

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

    

        A
        

        B
                

        B
    

Paste_Image.png

• ghost element 实现居中技术

• block实现垂直居中
  利用绝对定位

Paste_Image.png

原理的话 下面会说

水平垂直

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

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

Paste_Image.png

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

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

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

Paste_Image.png

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