所有样式设置之前,Body元素可能会自带一个margin属性,需要将其覆盖掉。否则有些方法使用时可能会导致窗口边缘出现滚动条。
所以开始之前需要:
水平居中
1. 父元素设置text-align:center,子元素为行内元素或设置为行内元素,此时图片和文字都是居中显示的。
2. 当图片居中,图片下面的说明文字在居中位置并且需要左对齐显示的话,设置包裹的容器宽度为图片的宽度,并margin: 0 auto; 此方式对于块级元素和行内元素都适用。
3. 子元素宽已知px。相对于父元素定位,left偏移50%,左外边距设为自身宽高的负一半,需要设置父元素宽度。
4. transform
5. flex
垂直居中
1. 父元素display: table-cell;vertical-align: middle;子元素会垂直居中于父元素,需要确定父元素的高度。
缺点:margin属性失效,因为margin不适用于表格布局;
tabel-cell的元素宽高设置为百分比时无效果,如果需要宽度100%,将container宽度设置为极大的一个值;
当container需要设置为absolute的时候table-cell失效,因为absolute强制把非flex元素设置为block,解决办法是在外面再套一层容器进行absolute
2. 子元素高已知px。相对于父元素定位,top偏移50%,上外边距设为自身宽高的负一半,注意父元素需要设置height
3. transform
4. flex
水平垂直居中
1. 子元素宽高已知px。相对于父元素定位,top和left偏移50%,左外边距和上外边距各设为自身宽高的负一半;
缺点:确定的大小,无法自适应。
2. transform:将左外边距和上外边距负值修改为transform: translate(-50%,-50%),此时具有自适应的效果。原理:translate里的百分比是根据元素自身宽高计算的。
3. 子元素相对于父元素绝对定位,四周为0,并且margin值为auto
4. 父元素display: table-cell;vertical-align: middle;text-align:center子元素是行内元素
5. display: flex;justify-content: center;align-items: center;缺点:不兼容IE浏览器。