<center>标签
对其所包括的文本进行水平居中。
text-align:center
text-align:center,在父容器里水平居中 inline 文字,或 inline 元素
vertical-align:middle
垂直居中 inline 文字,inline 元素,配合 display:table,display:table-cell,有奇效。
line-height
与 height 公用设置相同高度,垂直居中文字。
margin:auto
<style>
#ex2_container { width:200px; background-color:yellow; }
#ex2_content { margin:0px auto; background-color:gray; color:white; display:table; }
</style>
<div id="ex2_container">
<div id="ex2_content">Hello World</div>
</div>
hacks, hacks(小技巧)
有许多 hacks ,负 margin,影子元素 ::before 等。如果你的内容不是固定大小的话,它们大部分是很脆弱的。
translate(-50%,-50%)
用 position 加 translate translate(-50%,-50%) 比较奇特,百分比计算不是以父元素为基准,而是以自己为基准。
<style>
#ex3_container { width:200px; height:200px; background-color:yellow; position:relative; }
#ex3_content {
left:50%; top:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
background-color:gray;
color:white;
position:absolute;
}
</style>
<div id="ex3_container">
<div id="ex3_content">Hello World</div>
</div>
绝对定位居中
父容器元素:position: relative
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
注意:高度必须定义,建议加 overflow: auto,防止内容溢出。
视口居中
内容元素:position: fixed,z-index: 999,记住父容器元素 position: relative
.Absolute-Center .is-Fixed {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 999;
}
响应式
百分比宽高,最大、最小宽度均可以,加 padding 也可以
.Absolute-Center .is-Responsive {
width: 60%;
height: 60%;
min-width: 400px;
max-width: 500px;
padding: 40px;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
偏移
只要 margin: auto; 在,内容块将垂直居中,top, left, bottom, right 可以设置偏移。
.Absolute-Center .is-Right {
width: 50%;
height: 50%;
margin: auto;
overflow: auto;
position: absolute;
top: 0; left: auto; bottom: 0; right: 20px;
text-align: right;
}
溢出
居中内容比父容器高时,防止溢出,加 overflow: auto (没有任何 padding 时,也可以加 max-height: 100%;)。
.Absolute-Center .is-Overflow {
width: 50%;
height: 300px;
max-height: 100%;
margin: auto;
overflow: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
调整尺寸
resize 属性可以让尺寸可调。 设置 min- /max- 限制尺寸,确定加了 overflow: auto 。
.Absolute-Center .is-Resizable {
min-width: 20%;
max-width: 80%;
min-height: 20%;
max-height: 80%;
resize: both;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
图像
图像同样适用,设置 height: auto;
.Absolute-Center .is-Image {
width: 50%;
height: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
可变高度
高度必须定义,但可以是百分比或 max-height。不想定义高度的话,用 display: table (需要考虑 Table-Cell 兼容性)。
.Absolute-Center .is-Variable {
display: table;
width: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
display:table的几个用法
DIV+CSS的布局已经让表格布局几乎很少用到,除非表格语义性很强的情况。display:table解决了一部分需要使用表格特性但又不需要表格语义的情况,尤其是DIV+CSS很不方便解决的问题,比如以下两种情况:
一、父元素宽度固定,想让若干个子元素平分宽度
通常的做法是手动设置子元素的宽度,如果设置百分数不一定能整除,设置具体的数值又限制了父元素的宽度固定,很麻烦。可以使用display:table来解决:
.parent{display: table; width: 1000px;} .son{display: table-cell;}
如此一来,就算是三个或者六个元素也可以很方便均分父元素的宽度了。
二、块级子元素垂直居中
想让一个div或p在父元素中垂直居中一直是很多人解决不了的问题(注意直接对块级元素使用vertical-align是不能解决这个问题的,vertical-align定义行内元素的基线相对于该元素所在行的基线的垂直对齐),同样可以使用display:table方便解决:
.parent {display: table;} .son {display: table-cell; vertical-align: middle;}
将块级子元素的display设置为table-cell之后再使用vertical-align就可以了。
注意:虽然display:table解决了避免使用表格的问题,但有几个需要注意的:
- (1)display: table时padding会失效
- (2)display: table-row时margin、padding同时失效
- (3)display: table-cell时margin会失效
负 margin
确切知道宽高,负 margin 是宽和高的一半。
.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 */
}
Table-Cell
结构:
<div class="Pos-Container is-Table">
<div class="Table-Cell">
<div class="Center-Block">
<!-- CONTENT -->
</div>
</div>
</div>
样式:
.Pos-Container.is-Table { display: table; }
.is-Table .Table-Cell {
display: table-cell;
vertical-align: middle;
}
.is-Table .Center-Block {
width: 50%;
margin: 0 auto;
}
FlexBox
.Pos-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;
}