垂直水平居中
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也是一样
