您现在的位置:首页 >> 前端 >> 内容

css实现元素居中的方法介绍

时间:2018/3/30 14:28:54 点击:

  核心提示:简要介绍一下水平居中:被居中元素的宽度固定: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。

Tags:CS SS S实 实现 
作者:网络 来源:王龙楷