核心提示:简要介绍一下水平居中:被居中元素的宽度固定:1. margin:0 auto2. display:inline-block配合text-align:center3.display: flex配合jus...
简要介绍一下
水平居中:
被居中元素的宽度固定:
1. margin:0 auto
2. display:inline-block配合text-align:center
3.display: flex配合justify-content: center
被居中元素的宽度不固定:
1.display: box;box-orient: horizontal;box-pack: center;三者配合。(兼容性很差)
2.width: fit-content; margin:0 auto;二者配合。
3.浮动配合相对定位。(不好理解)
4.绝对定位配合相对定位。(上一个方法的变通)
垂直居中:
1.绝对定位和负外边距。(固定高度时才可用)
2.绝对定位配合transform: translate(0, -50%);
3.position: absolute; top: 0; bottom: 0; margin: auto;(固定高度时才可用)
4.父元素设padding值。
5.设置第三方基准。
6.display: flex配合align-items: center。