页面布局，居中是绝对少不了的，居中的方法有很多，今天分享几个。

Margin 0 auto、text-align:center、line-height这几个就不用多说了，适合文字、图片和块元素水平居中。如果知道容器高度或者是内容高度，很容易就能实现简单的居中。

Flex布局：

弹性布局，会使用的绝对非常建议使用这个布局，现在兼容性也好，要是非得兼容很低版本的浏览器，这个布局还是得考量一下。两个居中属性

justify-content: center;align-items: center;

transform: translateX(-50%) translateY(-50%)：

我们不知道容器宽高或者是内容宽高的时候，设定margin: 50%;然后使用transform的translated，这个属性的单位不是具体的像素单位的时候，百分比就是以自身的宽高计算的。一般都是配合定位使用。

display:table-cell，使用表格属性：

通过表格属性去居中，父元素：

display: table-cell;vertical-align: middle;text-align: center;

子元素需要设置：

display: inline-block;

绝对定位：

知道内容元素的宽高，设置top和left都是50%，这时候设置margin-top和margin-left内容元素宽高的一半，就能居中。

不知道宽高的情况下，设置top、left、right、bottom都设置0，然后margin: auto；也能居中。

Coding 个人笔记