OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

CSS垂直水平完全居中手册


分享到
分类 心得体会   关键字 前端   发布 ourjs  1409885751786
注意 转载须保留原文链接,译文链接,作者译者等信息。  
居中一直是CSS中被抱怨的典型。为什么实现起来这么辛苦?所以有人被嘲笑。我觉得问题不是没有办法做到,只是视情况而定,有很多不同方式,但是很难弄清楚应该用何种方式。

因此我写了这篇文章,希望能把他变得容易点。

水平居中


内联元素(inline or inline-*)居中?


你可以让他相对父级块级元素居中对齐

.center-children {
  text-align: center;
}

块级元素(block level)居中?


你可以通过设置margin-left和margin-right为auto让它居中(同时还要设置width,否则它就会承满整个容器,无法看出居中效果),如。

.center-me {
  margin: 0 auto;
}

如果有很多块级元素呢?


如果你有很匀块级元素需要水平居中成一行,你最好使用一个不同的display类型。这是一个使用inline-block和flex的例子。


在线示例: http://jsfiddle.net/ourjs/0b6b7wt8/


<main class="inline-block-center">
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>
<main class="flex-center">
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>

body {
  background: #f06d06;
  font-size: 80%;
}
main {
  background: white;
  margin: 20px 0;
  padding: 10px;
}
main div {
  background: black;
  color: white;
  padding: 15px;
  max-width: 125px;
  margin: 5px;
}
.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}
.flex-center {
  display: flex;
  justify-content: center;
}


垂直居中


垂直居中在CSS中有点棘手


内联元素(inline or inline-*)居中,像文本和链接那样的?

它是一行的吗?


有时侯元素可以表现像垂直居中,只是因为它们有相等的上下padding

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

如果padding因为某些原因不能用,而且文本不会换行的情况下,你可以使用line-height,让其与height相等去对齐文本。

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

它是多行的?


上下等padding的方式也可以让多行居中,但是如果这方法没用,你可以让这些文字的容器按table cell模式显示,然后设置文字的vertical-align属性对齐,就像talbe那样

在线演示: http://jsfiddle.net/ourjs/0fn2u4rc/

<table>
  <tr>
    <td>
      I'm vertically centered multiple lines of text in a real table cell.
    </td>
  </tr>
</table>
<div class="center-table">
  <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>

body {
  background: #f06d06;
  font-size: 80%;
}
table {
  background: white;
  width: 240px;
  border-collapse: separate;
  margin: 20px;
  height: 250px;
}
table td {
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  /* default is vertical-align: middle; */
}
.center-table {
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
.center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}


块级元素(block level)垂直居中?


你知道元素的高度吗?

出于很多方面的原因,不知道网页布局的高度是相当普遍的。

但是如果你的布局有一个固定高度,你就可以这样垂直居中:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* 如果没有使用: border-box; 的盒子模型则需要设置这个 */
}

元素的高度是未知的

尽管未知,但你仍有可能向上推移50%的宽度

在线演示: http://jsfiddle.net/ourjs/9sLf7p56/

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

你可以使用flexbox吗?

这并不奇怪,使用flexbox会容易非常多


<main>  
  <div>
     I'm a block-level element with an unknown height, centered vertically within my parent.
  </div>  
</main>

body {
  background: #f06d06;
  font-size: 80%;
}
main {
  background: white;
  height: 300px;
  width: 200px;
  padding: 20px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: vertical;
  overflow: auto;
}
main div {
  background: black;
  color: white;
  padding: 20px;
  resize: vertical;
  overflow: auto;
}


同时水平和垂直居中


元素有固定的宽度和高度


如果元素的宽度和高度是固定的,你需要先绝对居中,然后上移和左移50%的宽度即可,这种方案有极好的跨浏览器支持。

.parent {
  position: relative;
}
.child {
  width: 300px;
  height: 100px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -70px 0 0 -170px;
}

元素的宽度高度未知


如果你不知道高度和宽度(可变的),你可以使用transofrm属性在两个方向都平移负50%

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

原文地址: 点此
社区评论 ( Beta版 )
  • #0 f2e.be 1410226801845

    transofrm谁敢用

  • #1 田处七 1410229352550

    @f2e.be #0

    WebView 敢用

  • #2 luoerming 1410244604944

    @田处七 #1 说得JB好,也就做移动开发的敢用

  • #3 文代召 1410821205278

    门户站 和高兼容性的网站真的需要这种纯css居中尤其还是垂直居中的情况不多,有的话都直接上js了 ie678也都兼容。不过还是感谢分享

OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. OurJS-免费开源的博客引擎,论坛系统,网站模板和轻量级的CMS
  2. JavaScript构建(编绎)系统大比拼:Grunt vs. Gulp vs. NPM
  3. JavaScript中的继承,构造函数以及new关键字的作用
  4. CSS的力量:用一个DIV画图
  5. 微软Azure云推出基于JSON的NoSQL数据库DocumentDB
  6. 内存管理技巧:如何避免JavaScript的内存泄露
  7. 前置逗号是不好的JavaScript代码书写习惯吗?
  8. fibjs 比 nodejs 快五倍
  9. 为JavaScript设计一个指数操作(运算)符
  10. 响应式设计在图片上的应用: 一个HTML元素如何让Web更快
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 心得体会
  1. 避免误用 Redis
  2. CSS的力量:用一个DIV画图
  3. 读懂心理学:网页界面设计实用指南三则
  4. 树莓派的联合创始人访谈 - 我们是怎么让大家都成为DIY黑客的
  5. CSS字体大小: em与px、pt、百分比之间的对比
  6. Readme文档驱动型开发
  7. 皇帝的新衣:Node.js
  8. “设计师思维”正在毁灭我们
  9. 现在,你为什么应该学Node.js
  10. 7件你不知道但可以用CSS做的事

 关键字 - 前端
  1. 5个经典的前端面试问题
  2. 我被问得最多的十个JavaScript前端面试问题
  3. CSS3实现的响应式字体:自适应视图窗口大小的新单位
  4. 超简易——Bootstrap可关闭tab标签页
  5. 用纯css改变下拉列表select框的默认样式
  6. AngularJS在大型单页面应用中的性能优化(一)
  7. 什么是Viewport Meta(width详解)及在手机上的应用
  8. 我们抛弃了AngularJS:单页面应用的5大缺陷
  9. Animate.css让添加CSS动画像喝水一样容易
  10. 用纯CSS停止冒泡和阻止浏览器默认行为及事件响应,达到禁用(disable)的目的

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号