Bootstrap三种表单布局的使用方法
作者：-夏昊-
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了Bootstrap三种表单布局的使用方法，感兴趣的小伙伴们可以参考一下
Bootstrap提供了三种表单布局：垂直表单，内联表单和水平表单
&创建垂直或基本表单：
&•·向父 &form& 元素添加 role="form"。
&•·把标签和控件放在一个带有 class .form-group 的 &div& 中。这是获取最佳间距所必需的。
&•·向所有的文本元素 &input&、&textarea& 和 &select& 添加 class .form-control
&form role="form"&
&div class="form-group"&
&label for="name"&名称&/label&
&input type="text" class="form-control" id="name"
placeholder="请输入名称"&
&div class="form-group"&
&label for="inputfile"&文件输入&/label&
&input type="file" id="inputfile"&
&p class="help-block"&这里是块级帮助文本的实例。&/p&
&div class="checkbox"&
&input type="checkbox"& 请打勾
&button type="submit" class="btn btn-default"&提交&/button&
内联表单：
&内联表单中所有元素都向左对齐，标签并排，要创建内联表单，需要在form标签中加入class.form-inline
&form class="form-inline" role="form"&
&div class="form-group"&
&label class="sr-only" for="name"&名称&/label&
&input type="text" class="form-control" id="name"
placeholder="请输入名称"&
&div class="form-group"&
&label class="sr-only" for="inputfile"&文件输入&/label&
&input type="file" id="inputfile"&
&div class="checkbox"&
&input type="checkbox"& 请打勾
&button type="submit" class="btn btn-default"&提交&/button&
显示效果如下：
注意:默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，需要在表单控件上设置一个宽度。&
水平表单:和其它两种表单有所不同,要创建水平表单需要遵循以下步骤.
&•向父 &form& 元素添加 class .form-horizontal。
&•把标签和控件放在一个带有 class .form-group 的 &div& 中。
&•向标签添加 class .control-label。
&form class="form-horizontal" role="form"&
&div class="form-group"&
&label for="firstname" class="col-sm-2 control-label"&名字&/label&
&div class="col-sm-10"&
&input type="text" class="form-control" id="firstname"
placeholder="请输入名字"&
&div class="form-group"&
&label for="lastname" class="col-sm-2 control-label"&姓&/label&
&div class="col-sm-10"&
&input type="text" class="form-control" id="lastname"
placeholder="请输入姓"&
&div class="form-group"&
&div class="col-sm-offset-2 col-sm-10"&
&div class="checkbox"&
&input type="checkbox"& 请记住我
&div class="form-group"&
&div class="col-sm-offset-2 col-sm-10"&
&button type="submit" class="btn btn-default"&登录&/button&
显示效果如下：
如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具怎样使文字和表单居中对齐
您的位置： >>
>> 话题内容
您是第 8902 位浏览者 / 有 7 条回复
8年前 发表1F
我用了很多方法，怎也不能让文字跟表单中的复选框居中对齐，要么表单靠上了要么就靠下，在IE浏览器下是对的在火狐下就不对，如果有遇到这种问题解决了的麻烦告诉我一下，可以兼容一些常用的浏览器！
8年前 发表2F
先让复选框的表单&valign=&top&&&顶端&&在给表单一个padding:上&0&0&0&&（上=自己调下数值）属性
8年前 发表3F
很简单例如：我简写一下&form&&div&class=&&&&label&&input&type=&&&/&&/label&&/div&&/form&给表单加上一个DIV就OK了，做出来很整齐[&本帖最后由&八九不离十&于&&13:30&编辑&]
8年前 发表4F
或者&你就style&那个label
8年前 发表5F
解决方法：&margin:&(所属line-height-自身高度)/2px&0;vertical-align:middle详细参考:
8年前 发表6F
:S&楼主。。。IE和FIREFOX&对CSS的盒子模型解析是有误差的。。。这就是HACK代码的起源。。。您可以先查看一下CSS样式文件的&POSITION属性定位是不是相对定位值，然后把控件层的margin和padding四值全清零试:)&试。。。
5年前 发表7F
定义css样式就行了
body{font-family:font-size:12px}label{vertical-align:middle}input{vertical-align:middle}
站酷讨论组
你未加入讨论组，无法在本组发言！
简介：网站前台技术相关的讨论、交流……HTML、XHTML、CSS、XML、JavaScript……
============================================
◆ 拒绝无意义的话题及回复。
◆ 拒绝成品设计求助（如作图、改图等）。
◆ 拒绝任何形式的硬软广告。
◆ 企业招聘及项目合作，请发布至论坛相关版块。
============================================
我们都是各个行业的设计师，为了更好的交流设计、分享快乐而聚在一起。因此也请大家配合我们，共同维护良好的交流环境。：）本文最终总结出来办法就是要对齐的表单内容（含文字、图片、表单各种元素、label）字体设置为Tahoma，则可以完美的实现对齐(Verdana等字体也可以)，其中个别的input元素如radio的padding和margin设置为0，即可完美解决表单元素input等对齐问题。
最近的项目涉及到很多表单的制作，特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现，单(复)选框和它们后面的提示文字在不进行任何设置的情况下，是无法对齐的，而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle，也依然不能完美对齐。如下图所示：于是上网查看了一些网站，发现这个问题是普遍存在的，如下图（FF3.5）：在很多网站涉及到表单的页面中，都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。首先，搜索到了wheatlee前辈的文章《》。wheatlee在他的文章中关于垂直居中提到了这样几个关键点：1、vertical-align:middle的时候，是该元素的中心对齐周围元素的中心。2、这里&中心&的定义是：图片当然就是height的一半的位置，而文字应该是基于baseline往上移动0.5ex，亦即小写字母&x&的正中心。但是很多浏览器往往把ex这个单位定义为0.5em，以至于其实不一定是x的正中心（baseline等名词如果不懂，请先阅读wheatlee的文章）按照这个思路，对照我遇到的问题，首先想到的是先验证一下浏览器对于&复选框&和图片是不是使用同样的规则来渲染（是不是把复选框当成一个正方形图片来对待）。于是写出下面的代码：&style&body{font-size:12}&/style&&input style="vertical-align:" name="test" type="checkbox"&&img style="vertical-align:"&&src="testpic.gif" /&测试文字代码中的testpic.gif是一个尺寸与复选框完全一样的黑色图片。FF3.5下显示如下：事实证明，FF3.5对于复选框和图片的垂直对齐方式是采用同样的规则进行渲染的，即将复选框当作一个正方形的图片(IE不是)。按照wheatlee&middle的时候，是该元素的中心对齐周围元素的中心&的观点，如果我在复选框后面输入英文字符，那么复选框的中心将与英文中小写字母x的中心对齐。经测试，FF3.5下面基本上是这样的(在一些字号的时候会有一定的误差，比如，如果字体高度是偶数，那么这个中心点有时在一般偏上1px，有时在一半偏下1px)。如图：但是这对于中文来说，并不是一个好的结果。因为中文是方块字，并且相同字号的情况下，高度会比小写的x高出很多。所以，按照浏览器内置的方式，只用 vertical-align:middle是无论如何也无法对齐中文的（无论是只写中文，中文在前，英文在前，FF3.5都是按照小写x中心那种方法来对齐的）。但是回头再看看wheatlee的文章，他说这个小写x中心对齐的渲染方式，是对于&文字&来说的。那么，如果不是文字呢&？如果复选框后面跟的是一个行内元素，如label，而文字是写在它内部的，会是什么样呢？浏览器会不会将这个内联元素整体看作一个&块&，然后依照类似图片的规则进行渲染呢？如果那样，我们就达到目的了。
但是经过测试，很遗憾，事实并不是这样，加上label后跟没加没有任何区别。FF3.5/IE6/IE7均是如此。在FF3.5中用firebug看一下，证明浏览器并没有按照label的高度值来去对齐中心点。如图：如果按照之前的设想，红蓝两线应该是重合的。但现在的情况是，它们相差了1px。并且这1px是没有规律的，随着字号的放大，并不恒定，貌似轻易也无法提炼出对应关系来。于是想到，再试一下将label也加上vertical-align:middle。结果如图：在FF3.5和IE7下面已经很接近于我们希望的状态了，只差1px。IE6下& 无语了。经过以上折腾，我得出了跟wheatlee相同的结论，就是，各种浏览器之间对这个问题的处理貌似没有任何规律。并且，似乎每一种浏览器对于 vertical-align:middle的渲染都不是完全遵从W3C所说的&Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.&但是经过仔细总结和分析，发现好像最终对齐的结果跟label的高度和当前字体中小写x的中心点都有关系，两者同时影响着渲染结果(虽然不明白为什么会这样)。那么，既然现在的情况以及非常接近于希望的状态了，是否可以通过设置字体的方式来改变小写x的中心点的位置，进而对垂直对齐的结果进行&微调&呢？最终，在不断的测试中发现，如果将font-family中的第一个字体设置为Tahoma，则可以完美的实现对齐(Verdana等字体也可以)。而且在FF3.5/IE6/IE7/IE8和Chrome中均显示正常。最终效果：
至此，多选框(checkbox)和提示文字对齐的问题已经解决，那么其他表单元素呢？试验了一下单选框(radio)，发现，还是有问题。提示文字依然是偏上。用firebug看了一下，发现radio元素默认有5px的左边距和3px的上、右边距，却没有下边距。如图：于是，尝试去掉radio的外边距，刷新后显示正常。（其实多选框checkbox也是有外边距的，只是它的外边距四个方向都有，并且相等，所以对于垂直对齐没有影响。）下图是一些常用表单元素的最终显示效果以及最终代码，大家可以用不同浏览器看一下实际的效果（注：由于演示使用的12px的中文实际只有11px高，而 IE下文本框等元素的高度是22px，一个是奇数，一个是偶数，所以这些部分在IE中是无论如何也对不齐的，差1px。如果手动控制文本框高度为奇数，或者将文字设置成为偶数的高度，则显示正常）：
本文关键词：
阅读(...) 评论()欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> 如何使用让显示，让有哪些CSS样式呢？
需要的主要css代码有两个，一个为:center（），另外一个为:0 auto；其两个样式需要配合使用才能实现的居中显示排版。
首先我们对设置，再对需要居中的div盒子设置margin:0 auto，这样即可让对应水平居中。
实例讲解div居中代码应用，为了观察div居中效果，我们对div设置一个为&.div&在html中内使用=&div&,设置其为400高度为100px，为红色。以便我们观察效果。
1、完整+css代码
&!DOCTYPE&html&&&&charset=&utf-8&&&div居中&在线演示&&&body{&text-align:center}&.div{&margin:0&&:400&:100&:1px&solid&#F00}&/*&：为了观察效果设置宽度&边框&等样式&*/&&&&&class=&div&&DIVCSS5实例&&&&
2、居中实例截图
div实现居中效果截图
3、div居中代码应用特点
此居中方法是让div居中效果完美兼容各大平台、兼容各大浏览器，无论高版本ie还是高版本的ie均兼容。
4、在线演示：
5、打包下载：
6、居中相关CSS教程
9）、如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 17:37
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台如何只用CSS做到完全居中 - 文章 - 伯乐在线
& 如何只用CSS做到完全居中
【感谢 的热心翻译。如果其他朋友也有不错的原创或译文，可以尝试。】
我们都知道 margin:0 的样式能让元素水平居中，而 margin: 却不能做到垂直居中……直到现在。但是，请注意！想让元素绝对居中，只需要声明元素高度，并且附加以下样式，就可以做到：
.Absolute-Center {
top: 0; left: 0; bottom: 0; right: 0;
.Absolute-Center {&&margin: auto;&&position: absolute;&&top: 0; left: 0; bottom: 0; right: 0;}
我并不是第一个发现这种方法的人（不过我还是敢把它叫做“完全居中”），它有可能是种非常普遍的技巧。但大多数介绍垂直居中的文章中并没有提到过这种方法。如果不是浏览的评论，我甚至根本就不会发现这个办法。
上面那篇文章的评论栏中，Simon提供了一个的链接，其他的方法相比之下就相形见绌了。（Priit也在评论栏中提到了同样的方法）。深入研究了一番之后，我又用某些关键词找到了记载这种方法的三个网站：、、。
以前从未用过这种方法的我想试试，看看这种”完全居中”的方法到底有多么神奇。 好处：
跨浏览器，兼容性好（无需hack，可兼顾IE8~IE10）
无特殊标记，样式更精简
自适应布局，可以使用百分比和最大最小高宽等样式
居中时不考虑元素的padding值（也不需要使用box-sizing样式）
布局块可以自由调节大小
img的图像也可以使用
同时注意：
必须声明元素高度
推荐设置overflow:样式避免元素溢出，显示不正常的问题
这种方法在Windows Phone上不起作用
浏览器支持：Chrome、Firefox、Safari、Mobile Safari、IE8-10。 “完全居中”经测试可以完美地应用在最新版本的Chrome、Firefox、Safari、Mobile Safari中，甚至也可以运行在IE8~IE10上
“完全居中”并不是本篇文章中唯一的选项。要做到垂直居中，还存在着其他方法，各有各的长处。采取什么样的方法，取决于你所支持的浏览器，以及现有标签的结构。下面这张对照表能够帮你选出最符合你需要的方法。
支持的浏览器
是否 响应式
内容溢出后的样式
resize:both
现代浏览器&IE8+
会导致容器溢出
‘可变高度’的特性不能跨浏览器
负margin值
大小改变后不再居中
不具有响应式特性，margin值必须经过手工计算
现代浏览器&IE9+
会导致容器溢出
Table-Cell
现代浏览器&IE8+
会加上多余的标记
Inline-Block
现代浏览器&IE8+&IE7*
需要使用容器包裹和hack式的样式
现代浏览器&IE10+
会导致容器溢出
需要使用容器包裹和厂商前缀（vendor prefix）
在研究了规范和文档后，我总结出了“完全居中”的工作原理：
在普通文档流里，margin: 的意思是设置元素的margin-top和margin-bottom为0。
:?If ‘margin-top’, or ‘margin-bottom’ are ‘auto’, their used value is 0.
2. 设置了position: 的元素会变成块元素，并脱离普通文档流。而文档的其余部分照常渲染，元素像是不在原来的位置一样。 :?…an element that is positioned absolutely is taken out of the flow and thus takes up no space
3. 设置了top: 0; left: 0; bottom: 0; right: 0; 样式的块元素会让浏览器为它包裹一层新的盒子，因此这个元素会填满它相对父元素的内部空间，这个相对父元素可以是是body标签，或者是一个设置了position: 样式的容器。 :?For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element’s containing block (what the element is positioned relative to).
4. 给元素设置了宽高以后，浏览器会阻止元素填满所有的空间，根据margin: 的要求，重新计算，并包裹一层新的盒子。 :?The margin of the [absolutely positioned] element is then positioned inside these offsets.
5. 既然块元素是绝对定位的，又脱离了普通文档流，因此浏览器在包裹盒子之前会给margin-top和margin-bottom设置一个相等的值。 :?If none of the three [top, bottom, height] are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values.?AKA: center the block vertically
使用“完全居中”，有意遵照了标准margin: 样式渲染的规定，所以应当在与标准兼容的各种浏览器中起作用。
容器内对齐
使用“完全居中”，就可以在一个设置了position: relative的容器中做到完全居中元素了！
.Center-Container {
.Absolute-Center {
width: 50%;
height: 50%;
top: 0; left: 0; bottom: 0; right: 0;
123456789101112
.Center-Container {&&position: relative;}&.Absolute-Center {&&width: 50%;&&height: 50%;&&overflow: auto;&&margin: auto;&&position: absolute;&&top: 0; left: 0; bottom: 0; right: 0;}
接下来的示例会假设已经包含了以下样式，并且以逐步添加样式的方式提供不同的特性。
在可视区域内居中
想要使内容区在可视区域内居中么？设置position: fixed样式，并设置一个较高的z-index值，就可以做到。
.Absolute-Center.is-Fixed {
z-index: 999;
.Absolute-Center.is-Fixed {&&position: fixed;&&z-index: 999;}
移动版Safari的说明：如果外面没有一层设置position: relative的容器，内容区会以整个文档的高度的中心点为基准居中，而不是以可视区域的高度中心点为基准居中。
如果需要添加固定的标题，或者其他带偏移样式的元素，可以直接把类似top: 70 的样式写进内容区域的样式中。一旦声明了margin: 的样式，内容块的top left bottom right的属性值也会同时计算进去。
如果想让内容块在贴近侧边的过程中保持水平居中，可以使用right: 0; left: 让内容贴在右侧，或者使用left: 0; right: 使内容贴在左侧。
.Absolute-Center.is-Fixed {
z-index: 999;
.Absolute-Center.is-Fixed {&&position: fixed;&&z-index: 999;}
使用absolute的最大好处就是可以完美地使用带百分比的宽高样式！就算是min-width/max-width或者min-height/max-height也能够有如预期般的表现。
再进一步加上padding样式的话，absolute式的完全居中也丝毫不会破坏！
.Absolute-Center.is-Responsive {
width: 60%;
height: 60%;
min-width: 200
max-width: 400
padding: 40
.Absolute-Center.is-Responsive {&&width: 60%; &&height: 60%;&&min-width: 200px;&&max-width: 400px;&&padding: 40px;}
带溢出内容
内容区高度大于可视区域或者一个position: relative的容器，其内容可能会溢出容器，或被容器截断。只要内容区域没有超出容器（没有给内容容器预留padding的话，可以设置max-height: 100%;的样式），那么容器内就会产生滚动条。
.Absolute-Center.is-Overflow {
.Absolute-Center.is-Overflow {&&overflow: auto;}
大小可调整
使用其他样式，或者使用JavaScript调整内容区的大小，也是不用手动重新计算的！如果设置了resize的样式，甚至可以让用户自行调节内容区域的大小。 “完全居中”法，无论内容区怎么改变大小，都会保持居中。
设置了min-/max- 开头的属性可以限制区块的大小而不用担心撑开容器。
.Absolute-Center.is-Resizable {
min-width: 20%;
max-width: 80%;
min-height: 20%;
max-height: 80%;
.Absolute-Center.is-Resizable {&&min-width: 20%;&&max-width: 80%;&&min-height: 20%;&&max-height: 80%;&&resize: both;&&overflow: auto;}
如果不设置resize: both的样式，可以设置transition样式平滑地在大小间切换。一定要记得设置overflow: auto样式，因为改变大小后的容器高宽很有可能会小于内容的高宽。 “完全居中”法是唯一一种能支持使用resize: both样式的方法。
使用注意：
需要设置max-width/max-height给内容区域留足够的空间，不然就有可能使容器溢出。
resize属性不支持移动版浏览器和IE8-10，如果用户体验很重要的话，请确保用户可以有其他替代方法来改变大小。
同时使用resize样式和transition会使用户在开始改变大小时产生等于transition效果时间等长的延时。
图像也同样有效！提供相应的class，并指定样式 height: ，就得到了一张随着容器改变大小的响应式图片。
请注意，height: 样式虽然对图片有效，如果没有用到了后面介绍的‘可变高技巧’，则会导致普通内容区域伸长以适应容器长度。
浏览器很有可能是根据渲染结果填充了图像高度值，所以在测试过的浏览器中，margin: 样式就像是声明了固定的高度值一般正常工作。
&img src="/g/500/200" alt="" /&
&img src="/g/500/200" alt="" /&
.Absolute-Center.is-Image {
.Absolute-Center.is-Image img {
width: 100%;
.Absolute-Center.is-Image {&&height: auto;}&.Absolute-Center.is-Image img { &&width: 100%;&&height: auto;}
“完全居中”法的确需要声明容器高度，但是高度受max-height样式的影响，也可以是百分比。这非常适合响应式的方案，只需要设置好带溢出内容就行。
另一种替代方案是设置display: table样式居中，，不管内容的长度。这种方法会在一些浏览器中产生问题（主要是IE和Firefox）。我在ELL Creative的朋友Kalley写了一个基于Modernizr 的测试，可以用来检查浏览器是否支持这种居中方案。现在这种方法可以做到渐进增强。
注意要点： 这种方法会破坏浏览器兼容性，如果Modernizr测试不能满足你的需求，你可能需要考虑其他的实现方案。
与大小可调整技术是不兼容的
Firefox/IE8中使用display: table，内容区在垂直方向靠上，水平方向仍然居中。
IE9/10中使用display: table，内容区会跑到左上角。
移动版Safari中内容区是水平对齐的，但是如果使用了百分比的宽度，水平方向上会稍稍偏离中心。
Javascript:
/* Modernizr Test for Variable Height Content */
Modernizr.testStyles('#modernizr { display: height: 50 width: 50 margin: position: top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {
Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);
/* Modernizr Test for Variable Height Content */Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {&&Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);});
.absolutecentercontent .Absolute-Center.is-Variable {
.absolutecentercontent .Absolute-Center.is-Variable {&&display: table;&&height: auto;}
“完全居中”法是解决居中问题的好方法，同时也有许多可以满足不同需求的其他方法。最常见的，推荐的方法有负margin值、transform法、table-cell法、inline-block法、以及现在出现的Flexbox法，这些方法其他文章都有深入介绍，所以这里只会稍稍提及。
负margin值
这或许是最常用的方法。如果知道了各个元素的大小，设置等于宽高一半大小的负margin值（如果没有使用box-sizing: border-box样式，还需要加上padding值），再配合top: 50%; left: 50%;样式就会使块元素居中。
需要注意的是，这是按照预想情况也能在工作在IE6-7下的唯一方法。
.is-Negative {
width: 300
height: 200
padding: 20
top: 50%; left: 50%;
margin-left: -170 /* (width + padding)/2 */
margin-top: -120 /* (height + padding)/2 */
.is-Negative {&&&&&&&&width: 300px;&&&&&&&&height: 200px;&&&&&&&&padding: 20px;&&&&&&&&position: absolute;&&&&&&&&top: 50%; left: 50%;&&&&&&&&margin-left: -170px; /* (width + padding)/2 */&&&&&&&&margin-top: -120px; /* (height + padding)/2 */}
浏览器兼容性非常好，甚至支持IE6-7
需要的编码量很少
同时注意：
这是个非响应式的方法，不能使用百分比的大小，也不能设置min-/max-的最大值最小值。
内容可能会超出容器
需要为padding预留空间，或者需要使用box-sizing: border-box样式。
transform法
和“完全居中”法的好处一样，简单有效，同时支持可变高度。为内容指定带有厂商前缀的transform: translate(-50%,-50%)和top: 50%; left: 50%;样式就可以让内容块居中。
.is-Transformed {
width: 50%;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
.is-Transformed { &&width: 50%;&&margin: auto;&&position: absolute;&&top: 50%; left: 50%;&&-webkit-transform: translate(-50%,-50%);&&&&&&-ms-transform: translate(-50%,-50%);&&&&&&&&&&transform: translate(-50%,-50%);}
内容高度可变
同时注意：
需要写厂商前缀
会和其他transform样式有冲突
某些情况下的边缘和字体渲染会有问题
table-cell法
这种可能是最好的方法，因为高度可以随内容改变，浏览器支持也不差。主要缺陷是会产生额外的标签，每一个需要居中的元素需要三个额外的HTML标签。
&div class="Center-Container is-Table"&
&div class="Table-Cell"&
&div class="Center-Block"&
&!-- CONTENT --&
&div class="Center-Container is-Table"&&&&div class="Table-Cell"&&&&&&div class="Center-Block"&&&&&&!-- CONTENT --&&&&&&/div&&&&/div&&/div&
.Center-Container.is-Table { display: }
.is-Table .Table-Cell {
display: table-
vertical-align:
.is-Table .Center-Block {
width: 50%;
.Center-Container.is-Table { display: table; }.is-Table .Table-Cell {&&display: table-cell;&&vertical-align: middle;}.is-Table .Center-Block {&&width: 50%;&&margin: 0 auto;}
内容高度可变
内容溢出则能自动撑开父元素高度
浏览器兼容性好
同时注意：
需要额外的HTML标签
inline-block法
迫切需要的方法：inline-block法居中。基本方法是使用 display: inline-block, vertical-align: middle样式和伪元素让内容块在容器中居中。我的实现用到了几个在其他地方见不到的新技巧解决了一些问题。
内容区声明的宽度不能大于容器的100% 减去0.25em的宽度。就像一段带有长文本的区域。不然，内容区域会被推到顶端，这就是使用:after伪类的原因。使用:before伪类则会让元素有100%的大小！
如果内容块需要尽可能大地占用水平空间，可以为大容器加上max-width: 99%;样式，或者考虑浏览器和容器宽度的情况下使用max-width: calc(100% &#em) 样式。
这种方法和table-cell的大多数好处相同，不过最初我放弃了这个方法，因为它更像是hack。不管这一点的话，浏览器支持很不错，而且也被证实是很流行的方法。
&div class="Center-Container is-Inline"&
&div class="Center-Block"&
&!-- CONTENT --&
&div class="Center-Container is-Inline"&&&&div class="Center-Block"&&&&&&!-- CONTENT --&&&&/div&&/div&
.Center-Container.is-Inline {
text-align:
.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
display: inline-
vertical-align:
.Center-Container.is-Inline:after {
content: '';
height: 100%;
margin-left: -0.25 /* To offset spacing. May vary by font */
.is-Inline .Center-Block {
max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
/* max-width: calc(100% - 0.25em) /* Only for IE9+ */
123456789101112131415161718192021
.Center-Container.is-Inline { &&text-align: center;&&overflow: auto;}&.Center-Container.is-Inline:after,.is-Inline .Center-Block {&&display: inline-block;&&vertical-align: middle;}&.Center-Container.is-Inline:after {&&content: '';&&height: 100%;&&margin-left: -0.25em; /* To offset spacing. May vary by font */}&.is-Inline .Center-Block {&&max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */&&/* max-width: calc(100% - 0.25em) /* Only for IE9+ */ }
内容高度可变
内容溢出则能自动撑开父元素高度
浏览器兼容性好，甚至可以调整支持IE7
同时注意：
需要额外容器
依赖于margin-left: -0.25em的样式，做到水平居中，需要为不同的字体大小作调整
内容区声明的宽度不能大于容器的100% 减去0.25em的宽度
CSS未来发展的方向就是采用Flexbox这种设计，解决像垂直居中这种共同的问题。请注意，Flexbox有不止一种办法居中，他也可以用来分栏，并解决奇奇怪怪的布局问题。
.Center-Container.is-Flexbox {
display: -webkit-
display: -moz-
display: -ms-
display: -webkit-
-webkit-box-align:
-moz-box-align:
-ms-flex-align:
-webkit-align-items:
align-items:
-webkit-box-pack:
-moz-box-pack:
-ms-flex-pack:
-webkit-justify-content:
justify-content:
1234567891011121314151617
.Center-Container.is-Flexbox {&&display: -webkit-box;&&display: -moz-box;&&display: -ms-flexbox;&&display: -webkit-flex;&&display: flex;&&-webkit-box-align: center;&&&& -moz-box-align: center;&&&& -ms-flex-align: center;&&-webkit-align-items: center;&&&&&&&&&&align-items: center;&&-webkit-box-pack: center;&&&& -moz-box-pack: center;&&&& -ms-flex-pack: center;&&-webkit-justify-content: center;&&&&&&&&&&justify-content: center;}
内容可以是任意高宽，溢出也能表现良好
可以用于各种高级布局技巧
同时注意： 不支持IE8-9
需要在body上写样式，或者需要额外容器
需要各种厂商前缀兼容现代浏览器
可能有潜在的性能问题
最后的建议
各项技术都有各自的好处，采取什么样的方法，取决于你所支持的浏览器，以及现有标签的结构。请使用上面提供对照表帮你选出最符合你需要的方法。
“完全居中”法简单方便，迅速及时。以前使用负Margin值的地方，都可以使用Absolute居中。无需繁琐的数学计算，无需额外标签，而且可以随时改变大小。
如果网站需要可变高度的内容，而且同时照顾到浏览器兼容性的话，可以尝试table-cell和inline-block技术，如果想尝试新鲜事物的话，可以使用Flexbox，并享受这种高级技术带来的好处。
关于作者：
可能感兴趣的话题
我想问下，垂直居中干嘛，用处很大么
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线内容团队正试图以我们微薄的力量，把优秀的原创文章和译文分享给读者，为“快餐”添加一些“营养”元素。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线