CSS技巧:让任何元素位于中间 | 您所在的位置:网站首页 › web怎么把字体调到中间 › CSS技巧:让任何元素位于中间 |
CSS技巧:让任何元素位于中间
在CSS中让元素位于中间位置是非常让人烦心的,也是对CSS普遍抱怨的一个问题之一,为什么做起来这么难?问题不是做起来难,而是有很多实现方式,取决于不同的场景,难以确切知道哪个解决方案适合哪个场景。 横向中间首先CSS中需要被定位中间的有两个元素,一个是明面上看得见的文本或链接元素,一个是背后看不见的块block,一般我们使用block块作为一个区域布局,在这块内加入各种元素。 如果是一个块需要定位在页面中间: margin: 0 auto; 也就是让margin-left和 margin-right 设为 auto。也是设置宽度,否则宽度会撑满,不会位于中间了。 如果是对文本或链接位于中间: text-align: center; 垂直中间 让任何元素位于垂直方向的中间部位: html, body { height: 100 %; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }上面CSS代码能够让任何元素定位在垂直中间。 如果使用flexbox更简单: .parent { display: flex; flex-direction: column; justify-content: center; } 横向纵向都位于中央 使用flexbox很简单: .parent { display: flex; justify-content: center; align-items: center; }
Javascript/CSS小技巧
|
CopyRight 2018-2019 实验室设备网 版权所有 |