一、元素水平居中的方法
1.对于行内元素
父元素上设置:text-align:center
2.对于确定宽度的块级元素
(1)margin实现
margin:0 auto;
(2)绝对定位和margin-left实现
父元素:position:relative
子元素:margin-left:(父width-子width)/2
(3)对于宽度未知的块级元素
(1)table 标签配合 margin 左右 auto 实现水平居中。使用 table 标签(或 直接将块级元素设值为 display:table),再通过给该标签添加左右 margin 为 auto。
(2)inline-block 实现水平居中方法。display:inline-block 和 text-align:center 实现水平居中。
(3)绝对定位+transform,translateX 可以移动本身元素的 50%。
(4)flex 布局使用 justify-content:center
二、元素垂直居中的方法
1. 利用 line-height 实现居中,这种方法适合纯文字类
2. 通过设置父容器 相对定位 ;子级设置 绝对定位,标签通过 margin 实现自 适应居中
3. 弹性布局 flex :父级设置 display: flex; 子级设置 margin 为 auto 实现自适 应居中
4. 父级设置相对定位,子级设置绝对定位,并且通过位移 transform 实现
5. table 布局,父级通过转换成表格形式,然后子级设置 vertical-align 实现。 (需要注意的是:vertical-align: middle 使用的前提条件是内联元素以及 display 值为 table-cell 的元素)。
三、盒子完美居中
方法一:
position top:父元素高的一半,left:父元素宽的一半
margin-top 该元素高的一半,margin-left:该元素宽的一半
方法二:
position:absolute;top right left bottom:0
margin:auto
子元素上设置
方法三:
弹性盒 父元素 display:flex
justify-content:center
align-items:center
flex布局设置居中
方法四:
父元素设置position:relative 子元素设置:position:absolute
left: 50%;top:50%;transform:translate(-50%,-50%);
定位:子绝父相
方法五:
table-cell实现垂直居中
父元素:display:table-cell;vertical-align:middle;text-align:center
子元素:display:inline-block
方法六:
给容器加个伪元素
父元素:text-align:center
设置父元素伪元素:父元素::after{content:“”;line-height:
子元素:display:inline-block