发帖  主题  评论  推荐  标签 用户 查搜   用户 密码 自动 注册  
 
面向对象 设计模式 领域驱动设计 企业架构 框架 开发教程 微服务 大数据 扩展性 并发编程 事件驱动 分布式 CQRS

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小技巧

 

解道移动版 | 关注解道 | 联系解道 | 关于解道 | 广告联系 | 网站地图 | 设为首页

沪ICP证12033263 如有意见请与我们联系 Powered by JdonFramework
返回顶部