Bootstrap 教程
Bootstrap 表格
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
&table&为表格添加基础样式。
&thead&表格标题行的容器元素（&tr&），用来标识表格列。
&tbody&表格主体中的表格行的容器元素（&tr&）。
&tr&一组出现在单行上的表格单元格的容器元素（&td& 或 &th&）。
&td&默认的表格单元格。
&th&特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 &thead& 内使用。
&caption&关于表格存储内容的描述或总结。
下表样式可用于表格中：
为任意 &table& 添加基本样式 (只有横向分隔线)
.table-striped
在 &tbody& 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered
为所有表格的单元格添加边框
.table-hover
在 &tbody& 内的任一行启用鼠标悬停状态
.table-condensed
让表格更加紧凑
联合使用所有表格类
&tr&, &th& 和 &td& 类
下表的类可用于表格的行或者单元格：
将悬停的颜色应用在行或者单元格上
表示成功的操作
表示信息变化的操作
表示一个警告的操作
表示一个危险的操作
如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加 class .table，如下面实例所示：
&table class=&table&&
&caption&基本的表格布局&/caption&
&th&名称&/th&
&th&城市&/th&
&td&Tanmay&/td&
&td&Bangalore&/td&
&td&Sachin&/td&
&td&Mumbai&/td&
结果如下所示：
除了基本的表格标记和 .table class，还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。
通过添加 .table-striped class，您将在 &tbody& 内的行上看到条纹，如下面的实例所示：
&table class=&table table-striped&&
&caption&条纹表格布局&/caption&
&th&名称&/th&
&th&城市&/th&
&th&邮编&/th&
&td&Tanmay&/td&
&td&Bangalore&/td&
&td&560001&/td&
&td&Sachin&/td&
&td&Mumbai&/td&
&td&400003&/td&
&td&Uma&/td&
&td&Pune&/td&
&td&411027&/td&
结果如下所示：
通过添加 .table-bordered class，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示：
&table class=&table table-bordered&&
&caption&边框表格布局&/caption&
&th&名称&/th&
&th&城市&/th&
&th&邮编&/th&
&td&Tanmay&/td&
&td&Bangalore&/td&
&td&560001&/td&
&td&Sachin&/td&
&td&Mumbai&/td&
&td&400003&/td&
&td&Uma&/td&
&td&Pune&/td&
&td&411027&/td&
结果如下所示：
通过添加 .table-hover class，当指针悬停在行上时会出现浅灰色背景，如下面的实例所示：
&table class=&table table-hover&&
&caption&悬停表格布局&/caption&
&th&名称&/th&
&th&城市&/th&
&th&邮编&/th&
&td&Tanmay&/td&
&td&Bangalore&/td&
&td&560001&/td&
&td&Sachin&/td&
&td&Mumbai&/td&
&td&400003&/td&
&td&Uma&/td&
&td&Pune&/td&
&td&411027&/td&
结果如下所示：
通过添加 .table-condensed
class，行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。这在想让信息看起来更紧凑时非常有用。
&table class=&table table-condensed&&
&caption&精简表格布局&/caption&
&th&名称&/th&
&th&城市&/th&
&th&邮编&/th&&/tr&
&td&Tanmay&/td&
&td&Bangalore&/td&
&td&560001&/td&&/tr&
&td&Sachin&/td&
&td&Mumbai&/td&
&td&400003&/td&&/tr&
&td&Uma&/td&
&td&Pune&/td&
&td&411027&/td&&/tr&
结果如下所示：
下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。
.active对某一特定的行或单元格应用悬停颜色
.success表示一个成功的或积极的动作
.warning表示一个需要注意的警告
.danger表示一个危险的或潜在的负面动作
这些类可被应用到 &tr&、&td& 或 &th&。
&table class=&table&&
&caption&上下文表格布局&/caption&
&th&产品&/th&
&th&付款日期&/th&
&th&状态&/th&&/tr&
&tr class=&active&&
&td&产品1&/td&
&td&23/11/2013&/td&
&td&待发货&/td&&/tr&
&tr class=&success&&
&td&产品2&/td&
&td&10/11/2013&/td&
&td&发货中&/td&&/tr&
&tr class=&warning&&
&td&产品3&/td&
&td&20/10/2013&/td&
&td&待确认&/td&&/tr&
&tr class=&danger&&
&td&产品4&/td&
&td&20/10/2013&/td&
&td&已退货&/td&&/tr&
结果如下所示：
通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。
&div class=&table-responsive&&
&table class=&table&&
&caption&响应式表格布局&/caption&
&th&产品&/th&
&th&付款日期&/th&
&th&状态&/th&&/tr&
&td&产品1&/td&
&td&23/11/2013&/td&
&td&待发货&/td&&/tr&
&td&产品2&/td&
&td&10/11/2013&/td&
&td&发货中&/td&&/tr&
&td&产品3&/td&
&td&20/10/2013&/td&
&td&待确认&/td&&/tr&
&td&产品4&/td&
&td&20/10/2013&/td&
&td&已退货&/td&&/tr&
结果如下所示：
记住登录状态
重复输入密码绝对定位使元素居中的原理 - 简书
绝对定位使元素居中的原理
使用绝对定位使元素居中有两种方法：HTML代码
&div id=div1&
&div id="div2"&&/div&
#div1{width: 100%;height: 100%;position:}
#div2{width: 50height: 50position:}
left: 50%;
margin: -25px 0 0 -25
top: 0;bottom: 0;
left: 0;right: 0;
在普通文档流中使用margin:不能做到垂直方向上的居中。但在绝对定位中可以实现。
以水平方向为例，解释一下为什么left、right都要设置为0。定位元素的宽度和水平放置满足一个等式。
left+margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-righ+right=包含块的宽度
这四个属性的默认值是auto，会相对于其静态位置放置，静态位置就是元素浮动之前所占据的位置。在从左向右读的语言中，left设置为auto，则值会计算为静态位置左边界距离包含块左边界的像素值，而right会计算为绝对定位元素右边界距离包含块右边界的像素值。加上元素本来的border-left-width+padding-left+width+padding-right+border-right-width正好等于包含块的宽度。
那么margin-left和margin-right就理所当然的为0了。当left和right设置为0时，为了满足等式，自然而然的margin就起作用了。
于是就有了居中的效果，垂直方向同理。（仔细想一下也就明白为什么正常文档流中不能垂直居中而绝对定位就可以的原因了）
参考书籍：《CSS权威指南》
知其然，知其所以然。CSS导航菜单水平居中的多种方法 | 设计达人
爱设计，爱分享。
CSS导航菜单水平居中的多种方法
赞助商链接
在网页设计中，水平导航菜单使用是十分广泛的，在CSS样式中，我们一般会用Float元素或是「display:inline-block」来解决。而今天主要讲解如何让未知宽度的元素居中，下面我们会列出几种方法来解决水平居中问题。当然这些方法不一定是用来解决导航菜单问题，还有其它类似情况也是可以使用的。
在线演示：
CSS导航菜单水平居中的多种方法：
方法1：display:inline-block
这个方法比较简单，是将容器转成「display:inline-block」行内块级元素，然后就可以直接用「text-align:center」使其达到水平居中效果。
HTML代码：
这里我们需要一个div来包围这个导航菜单。
&div class=&navbar&&
&li&&a href=&/&&首页&/a&&/li&
给外面的div添加「text-align:center」，然后将菜单容器设成「display:inline-block」行内块级元素，菜单浮左「float:left」
text-align:
.navbar ul {
display:inline-
.navbar li {
.navbar li + li {
margin-left:20
这里浏览器兼容只能是IE8或更高版本，所以如果要兼容IE7的话，请加入以下代码
.navbar ul {
方法2：position:relative
这是使用「position:relative」定位方法来让元素水平居中，我不是很推荐这方法，因为代码多了个div去包住，当然这些是根据情况来使用的。
HTML代码：
&div class=&navbar&&
&li&&a href=&/&&首页&/a&&/li&
将定位div设为浮动，再定位「left:50%」,然后导航定位至「left:-50%」，这方法很有意思吧。可能表达不是很清楚，自己看代码吧^^
.navbar & div {
.navbar ul {
left:-50%;
.navbar li {
.navbar li + li {
margin-left:20
如果要兼容IE7，请添加以下样式：
方法3：display:table
如果你喜欢简洁的代码，哪么这个方法就非常适合你了。
HTML代码：
&ul class=&navbar&&
&li&&a href=&/&&Home&/a&&/li&
.navbar li {
display:table-
.navbar li + li {
padding-left:20
浏览器兼容：这方法代码精简，但不支持IE7及以下版本……
方法4：display:inline-flex
有关flex layout的知识自己查下吧>_<
HTML代码：
&div class=&navbar&&
&li&&a href=&/&&Home&/a&&/li&
text-align:
.navbar & ul {
display:-webkit-inline-
display:-moz-inline-
display:-ms-inline-
display:-webkit-inline-
display:inline-
.navbar li + li {
margin-left:20
浏览器兼容：不支持IE7及以下版本的IE浏览器。
方法5：width:fit-content
HTML代码：
&div class=&navbar&&
&li&&a href=&/&&首页&/a&&/li&
text-align:
.navbar & ul {
display:-webkit-inline-
display:-moz-inline-
display:-ms-inline-
display:-webkit-inline-
display:inline-
.navbar li + li {
margin-left:20
浏览器兼容：这个兼容比较低，只支持Firefox或chrome、Opera 12这些较新的浏览器。
在线演示：
介绍了这么多方法，每种方法都有不同的好坏，这些视项目情况而定，对于我来说，「display:inline-block」是比较适合大众化的，因为它兼容性比较好嘛！
赞助商链接
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
艺术与审美入门之书
设计师必看
手机APP设计
新手推荐！
Web用户体验入门书籍
web前端&设计群css如何垂直居中一个元素的问题已经是一个老生常谈的问题了。不管对于一个新手或者老手，在面试过程中是经常被问到的。前两天在看一个flex的视频教程，当中提到了有关元素的居中问题，所以今天小编就来扒一扒几种常见的方式。不足之处请大家批评指正（所有的代码都是自己亲手敲过可用的）
1、水平居中（margin:0）　　
　　关于这个，大家应该是最不陌生的,不管是在培训班还是自己自学的话 。这个应该是老师讲的第一个方法了（水平方向上），但是其有一个前提，就是被包裹的元素不能有浮动的属性。否则的话这个属性就会失效。具体如下图代码：
body{margin: 0;}
width: 400
height: 400
width: 100
height: 100x;
background:
&div class="box"&
&div class="item"&&/div&
2、水平居中（text-align：）
　　这个属性在没有浮动的情况下，我们可以将其转换为inline/inline-block，然后其父元素加上text-align:属性就可以将其居中
body{margin: 0;}
width: 400
height: 400
text-align:
display:inline/inline-
width: 100
height: 100x;
background:
&div class="box"&
&div class="item"&&/div&
3、水平垂直居中（一） &子元素相对于父元素绝对定位，并且margin值减去自己宽高的一半
该方法具有一定的局限性，因为其必须要知道子元素本身的宽高
body{margin: 0;}
width: 400px;
height: 400px;
border:1px solid red;
position: relative;
position: absolute;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100x;
background: green;
&div class="box"&
&div class="item"&&/div&
4、水平垂直居中（二） &子元素相对于父元素绝对定位，并且margin值位auto
该方式不受元素宽高所限制，比较好用（推荐使用）
body{margin: 0;}
width: 400px;
height: 400px;
border:1px solid red;
position: relative;
position: absolute;
bottom: 0;
margin: auto;
width: 100px;
height: 100x;
background: green;
&div class="box"&
&div class="item"&&/div&
5、水平垂直居中（三） &diplay：table-cell
该方式是将元素转换成表格样式，再利用表格的样式来进行居中（推荐）
body{margin: 0;}
width: 400px;
height: 400px;
border:1px solid red;
display: table-cell;
vertical-align: middle;
margin:0 auto;
width: 100px;
height: 100x;
background: green;
&div class="box"&
&div class="item"&&/div&
6、水平垂直居中（四）&绝对定位和transfrom
该方法用最能装逼，用到了css3变形，面试者看到你代码里面有这样的 ，你的逼格瞬间就上去了，当然了 &你知道的，逼格的东西是有兼容性问题的
body{margin: 0;}
width: 400px;
height: 400px;
border:1px solid red;
position:relative;
width: 100px;
height: 100x;
background: green;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
&div class="box"&
&div class="item"&&/div&
7、水平垂直居中（五）css3中的flex属性
这个属性很好用，但是绝逼有兼容性问题的，用者要注意
body{margin: 0;}
width: 400px;
height: 400px;
border:1px solid red;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100x;
background: green;
&div class="box"&
&div class="item"&&/div&
是不是突然觉得居中的方法好简单啊！！！！！！！！！！！！！
阅读(...) 评论()平时,用的方法即第一种方法是设置left,top值均为50%,同时margin-left设置为绝对定位元素width的一半取负,margin-top设为其height的一半取负。
例如，绝对定位元素的width:100height:100
margin-left:-50
margin-top:-50
这是比较常用的一个方法，今天介绍一个巧妙的方法，是利用了绝对定位元素的自动伸缩的特性实现的。
代码如下：
bottom: 0;
上面就是第二种方法：设置margin:设置left和right的值相等,top和bottom的值相等,注意：left和right的值不能超过其相对元素width减去它自身width的一半,否则绝对定位元素会优先取left值进行定位(前提是文档流是从左向右),但是top和bottom的值却没有这个限制。
阅读(...) 评论()}