布局居中

水平居中，垂直居中，水平垂直居中常常会用到，实现方式不止一种，下面一一介绍

1、水平居中

第一种是使用text-align: center，但是只对内联元素和文字元素居中，块级元素无法居中

代码：

效果：

可以看到div并没有居中，但是里面的文本居中，内联元素span则是居中

那么块级元素如何实现居中呢？可以给块级元素设置宽度，然后margin-left和margin-top设置为auto

代码：

效果：

可以看到块级元素div实现了居中，但是缺点就是多个块级无法水平居中

代码：

想要的效果是：

但是实际的效果是：

那么如何实现多个块级元素同行居中呢

父级容器设置属性text-align:center,然后块级元素设置属性display:inline-block

代码：

当然不止这一种方法，我们可以利用弹性布局，设置display属性为flex，以及justify-conte为center实现水平居中

代码：

效果：

可以看到这种实现效果更佳理想

2、垂直居中

当height = line-height时元素将垂直居中

代码：

效果：

但是缺点就是如果内容过长会出现问题

代码：

效果：

所以利用表布局实现子元素垂直居中

设置父元素display:table;子元素display: table-cell;vertical-align: middle;

代码：

效果：

还可以利用flex布局，分别设置display，flex-direction，justify属性

代码如下：

效果：

固定高度的块级元素垂直居中

绝对定位距离顶部50%，并且margin-top向上偏移元素高度的一半

代码：

效果：

未知高度的块级元素

使用css3的transformY轴方向偏移50%，但是部分浏览器会存在兼容问题

代码：

效果：

3、水平垂直居中

固定宽高元素水平垂直居中

使用margin平移整体宽度的一半

代码：

效果：

未知宽高元素的水平居中

使用2d变换，在水平和垂直两个方向都向反向平移宽高的一半

代码：

效果：

利用flex布局

justify-content设置横轴对其方式，align-items定义在纵轴的对其方式

代码：

 

效果

使用grid布局，但是兼容性差

代码：

效果：

屏幕上水平垂直居中

使用绝对布局，让left和top都是50%，再用transform向左（上）平移它自己宽度（高度）的50%

效果：

还有一种方法，就是使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等

代码：

效果：