不使用js的情况下有三种方法:
1、css3弹性盒子flexbox
2、display:table-cell;
3、transform:translate();
在这介绍一下css3的弹性盒子内容,对该属性了解的可以直接下拉看红色分割线下的水平垂直居中的方法:
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
-----------------------------------以下为弹性容器的属性--------------------------------------------
可以设置的属性有:flex-direction,justify-content,align-items,flex-wrap,flex-flow,align-content
1.flex-direction指定弹性子元素在父容器中的位置: row左对齐(默认) \ row-reverse右对齐(从后往前排 最后一项在最上) \ column纵向排列 \ column-reverse反转纵向排列(从后往前排 最后一项在最上)
2.justify-content应用在弹性容器上,把弹性项沿着弹性容器的主轴线对齐(水平方向):flex-start左对齐 \ flex-end右对齐 \ center居中 \ space-between平均分布(首尾与弹性容器边框无空隙) \ space-around平均分布(首尾与弹性容器边框有空隙,距离为弹性项之间的距离的一半)