垂直水平居中

作者: yongningfu | 来源:发表于2017-03-18 17:28 被阅读0次

CSS居中布局方案
常用的居中方法
元素居中的方式
css居中方式总结（亲测有效）
CSS水平垂直居中总结
居中布局
CSS图片居中(水平居中和垂直居中)
css多行垂直水平居中--table布局大法
CSS居中大全(带截图)
居中对齐

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也是一样