利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 用 CSS 实现垂直居中并不容易.有些方法在一些浏览器中无效.下面我们看一下使对象垂直集中的5种不同方法,以及它们各自的优缺点.(可以看看测试页面,有简短解释.) 方法一 这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性. <div id="wrapper">…

昨天总结了css中水平居中的方法,今天来总结一下css中实现垂直居中的方法. line-height line-height用于实现单行文本的垂直居中,如下图中,我们要求单行文本垂直居中,只需要将div2设置行高line-height和height的值相同即可,也可以不用设置高度,因为单行文本的行高会撑开高度,其实二者就是一样的值.   但是这种方法有个不足之处,那就是如果文字内容的长度大于块的宽度时,就有一部分内容脱离了块,因为就不再是单行文本了,所以此方法只适用于单行文本.   还有一个方法…

原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell,mg12的博客那个相关文章的列表好像就是使用这个代码来的,之前我也是参考他来的.今天重新整理一下,并结合前人的辛劳,总结一下以作备份. 水平居中,如果知道元素的宽度,则可以使用 .cell{width:300px; margin:0 auto; text-align:center;} 如果是内联元…

这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ position: fixed;(absolute)      left:50%;      top:50%;      -webkit-transform: translate(-50%,-50%); } 他的父元素{ position: relative; width:100%; height:100%…

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 1. 已知元素宽度 方法一:已知宽高,可以用position定位 + margin负值的方法 : 绝对定位 + 4个方向全部0px + margin:auto 可以做到基于父容器水平垂居中:如果只需要垂直居中,那可以把left和right删掉,并且水平居中的方法也很多: 绝对定位 + 左50% + margin左:宽度一半的负值,可以做到水平居中,右也可以: 绝对定位 + 上50% + margin上:…

1.表格布局法.(利用表格的显示模式)需要用到一些冗余的 HTML 元素,因此这里不多介绍. 2.行内块法.也不作讨论,因为在我看来这种方法 hack 的味道很浓. 如果你有兴趣,可以去看看 Chris Coyier 写的“不为人知的居中方法”(http://css-tricks.com/centering-in-the-unknown).这篇出色的文章详细讲述了这两种技巧. 3.基于绝对定位实现的居中: 比如: main { position: absolute; top: 50%; left…

在项目中经常会遇到设置元素水平垂直居中的需求.而且具体的场景也不同,所以将个人总结的方法做个汇总,希望对浏览者有用. 以下所举的例子都以一个html为准,这里规定好一些公用样式. body { background-color: #efefef; } main { background-color: #fff; padding: 10px; margin:10px 0px; } main div { background-color: #aaf; } 水平居中 1 相对块级父元素,可将子级设置成…

1.元素水平居中 当然最好使的是: margin: 0 auto; 居中不好使的原因: 1.元素没有设置宽度,没有宽度怎么居中嘛! 2.设置了宽度依然不好使,你设置的是行内元素吧,行内元素和块元素的区别以及如何将行内元素转换为块元素请看我的另一篇文章! 示例 1: <div class="box"> <div class="content"> 哇!居中了 </div> </div> <style type=&qu…

1.文本水平居中line-height,text-align:center(文字)元素水平居中 margin:0 auo 方案1:position 元素已知宽度 父元素设置为:position: relative; 子元素设置为:position: absolute; left: 50%;top: 50%;margin: -50px 0 0 -50px;距上50%,据左50%,减去元素自身宽度的距离 方案2:position transform 元素未知宽度 margin: -50px 0 0…

1.top:cale(50% - 2rem); left:cale(50% - 2rem);…