css 盒子水平垂直居中方法

前言

经过一段时间css的学习,实现盒子水平和垂直居中的方法已经学习了多种,那么哪种方法更实用更方便呢? 下面我们一起通过代码来看一下这几种方法吧.

第一种

使用定位使盒子实现水平垂直居中,添加定位子元素为绝对定位时,父元素需设置为相对定位(子绝父相),绝对定位后的盒子已经脱标不占标准流的位置.
定位后先设置left,top属性值为50%,表示向右,向下移动父元素宽度,高度的50%,注意盒子移动是以左上角顶点位置为中心,所以此时盒子还不是居中须进一步设置.

利用margin负值使盒子移动本身的一半

第二种

利用平移属性 transform: translate 移动盒子,移动数值为父元素宽度的一半-自身宽度的一半

注意此时不要用margin属性来移动盒子,由于此时元素未脱标,所以会存在塌陷现象.

塌陷现象:互相嵌套块级元素, 如果给子元素设置margin-top会作用在父元素身上,这种现象就叫嵌套块级元素塌陷

解决办法:

1 给父元素设置 padding-top或 border-top

2 给父元素设置 overflow: hidden;

3 把子元素转换为行内块 display: inline-block;

4 浮动 绝对定位 相对定位的 盒子不会有嵌套块级元素外边距塌陷现象

第三种

通过定位+平移实现盒子的水平居中

第四种

绝对定位的子盒子设置四个方向定位为0,然后通过margin:auto 让其居中