水平居中,垂直居中,水平垂直居中常常会用到,实现方式不止一种,下面一一介绍
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的值相等
代码:
效果: