css中有很多不同的居中方法,适应不同的情况,下面简单介绍几种常见的:
1. 文字居中, 边距居中
这种居中方法一般使用较多。 text-align: center
规定文字居中, margin: 0 auto
规定水平居中。
|
2. 绝对定位居中
用于没有父元素包裹,需要居中的元素是绝对定位。
|
总结
上述都需要 margin:auto
,这是利用了 margin
把元素在页面上的剩余位置用边距填满,为边距赋统一值 auto
,这样就可以使元素2边相等。
如果元素的 width:100%
,那么这个元素就相当于居中,如果 width
不等于100%,就可以用 margin
把剩下的位置填满, 因为 margin
也是盒子模型中的成员,所以它在盒子中占据空间和 width:100%
一样。
3. table-cell
利用表格中 vertical-align: middle
可以垂直居中的特性,使用方便。不过这种方法的水平居中有局限性,内部元素不可以设置宽度
|
4. 绝对定位和负边距
这种方法本质上是使用计算解决偏离的问题,但只能用于居中元素确定宽度和高度。
|
5. css3 translate
原理和上一种方法一样,但是没有宽度的限制。不过与其他css3技术一样,可能需要解决兼容问题。
|
6. display:flex
代码量最少的方法,不过父元素宽、高需要确定。
|
下面是一些不常见的方法,用于拓展
7. 通过伪元素:after占位
|
8. display:-webkit-box
利用了css3的属性
|
- 本文作者: luckyship
- 本文链接: https://luckyship.github.io/2019/05/22/2019-05-22-css居中详解/
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!