长路漫漫
初学前端，说的不对望大家指点出来。放下你的砖头。
在页面布局中我们经常遇到元素居中问题：
- 水平居中
- 垂直居中
- 水平垂直居中
水平居中
- inline/inline-block + text-align
- 概况：对子元素设置display：inline/inline-block，对父级元素设置text-align： center；
- 详解：text-align概念：
CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align
并不控制块元素自己的对齐，只控制它的行内内容的对齐。
这里说明使用这种方法实现居中必须具备几点：
- 父元素是块元素
- 子元素是行内元素 常见的行内元素方法：display：inline/ inline-block
inline/inline-block + text-align
效果
- 绝对定位
- 已知元素的宽度和高度
当我们已知子元素的宽度以及高度的时候就可以使用负margin方法将元素居中；
说明：这里使用父级元素position: relative子元素position：absolute；
原因是我们要使用绝对定位；使子元素的left值为父元素的50%；即left:50%
这样结果子元素的左侧就在父元素的距离50%的位置;
left:50%效果
这样其实并不是我们想要的效果，我们需要子元素整体居中，这时候就需要使用margin将元素放置到正确的位置；我们将子元素的margin设为
-width/2；成了！
效果
负margin
- 未知子元素的宽高；
原理都是一样的，只不过这一次我们不知道元素的宽度以及高度；那么就不能使用负margin；这时候css3一个方法：transform:translate()就可以排上用场；
首先了解一下概念：
- CSS transform 属性允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被转换（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）.
- CSS transform 属性 , 只对 block 级元素生效！
- 这里我们使用
translateX()指定元素向X方向平移；
那么这不就和负margin一个道理么，搞起！
transform
效果
- table-cell
将元素设置为display:table-cellmdn上是这样介绍table-cell的；
table-cell
这是什么意思；赶紧看看td的文档；这里我发现
td可以使用 text-align；vertical-align 属性;赶紧试试！
table-cell
效果
- flexbox
先放上资源：
flex
效果
- grid 布局
笔者还没看过文档；看了之后这段补上，献上兼容性；
grid
暂时就能想到这几种方法；肯定还有别的方法。欢迎大家补充；-_-
下面的内容就从简了，基本原理都一样；
垂直居中
- vertical-align ：middle
注意必须在父元素中指定line-height否则vertical-align不起作用；
vertical-align
效果
- 固定宽高垂直居中
负margin
效果
- 未知宽高 transform
transform
效果
- table-cell
table-cell
效果
- flex
flex
效果
水平垂直居中
- table-cell + text-align + vertical-align
父级元素table-cell - block + 负margin / transform
- 定宽定高元素 负margin
负margin
效果
- 未知宽高 transform
通过使用css3属性对元素进行变换
transform
效果
- flex
使用flexbox对元素进行居中
flexbox
效果
