网页样式表单CSS的提示与窍门
See also the index of all tips.
居中文档
一个CSS通常的目的是用其来居中文稿和图片. 实际上, 有三种居中的类型::
最近执行CCS，您可以用Level 3的功能去容许绝对居中定位元素:
居中文稿的字句
在段落或者标题中的文稿内居中字句是最常见和(因此)最简单的。CSS对此有'text-align'的功能:
P { text-align: center }
H2 { text-align: center }
表示在P中或者在H2中每一行都是在边距内居中排列的, 就像这样:
在这段中的字句都是在段落的边距内居中的, 感谢CSS的"
text-align"功能中的'center'参数.
居中文本块或图片
有时侯并不是文稿需要居中排列, 而是文本块作为一个整体. 或者, 用不同的方式表 达: 我们要求左右的边距是对等的.
这样做的方法就是把边距设定为'auto'.这通常都是运用在文本块的固定的宽度上, 因为如果文本块本身是灵活的,
它就会完全的占用所有的可用的宽度. 以下是一个例子:
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 6em
}
...
<P class="blocktext">This rather...
这个有点窄的文本块中的版块就居中了. 但注意文本块中的字句是没有居中的
(他们是向左对齐的), 不像先前的例子.
这也是用来居中图片的方法: 把它本身设定为一个版块, 再对它施用边距设定功能.例如:
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">
以下的图片是居中排列的. 
垂直居中
CSS level 2 不具备垂直居中文档的能力.在CSS level 3可能会具备这种功能 (请见 下面).但是即使在CSS2内也可以通过结合一些特性来垂直居中文段. 诀窍是把外围版块具体指定格式化为单元表格格式,,
,因为单元表格格式.可以 被垂直居中.
下面的例子是在一个指定高度的文段中居中其中的一个段落。另外一个例子则是指出一个段落之所以可以在浏览器窗口中垂直居中, 是因为它是在一个已经完全被定位和与窗口有同样高度的文段内.
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
<DIV class="container">
<P>This small paragraph...
</DIV>
CSS level 3垂直集中
CSS level 3提供其他可能性。这个时候 (2014), 能够不使用绝对居中定位(可能引起文字重叠)地
垂直居中文段的方法还是有待讨论但如果您知道文字重叠不会是一个问题的话，您可以用"转变"属性去把绝对定位元素居中。例如：
This paragraph is vertically centered.
像这样的文件:
<div class=container3>
<p>This paragraph...
</div>
像这样的样式单:
div.container3 {
height: 10em;
position: relative } /* 1 */
div.container3 p {
margin: 0;
position: absolute; /* 2 */
top: 50%; /* 3 */
transform: translate(0, -50%) } /* 4 */
它的基本规则是:
- 使容器 相对定位, 标明它是绝对定位元素的容器
- 使容器自己绝对定位.
- 把它放到容器的中间的"最高:50%".(注意这里的50%是容器高度的50%)
- 使用翻译将元素向上移动其自身高度的一半(翻译的50% (0, -50%)'指元件本身的高度).)
最近 (大概从2015年起), 另一种技术已经可以在几种CSS执行使用。它是基于'display'属性的'flex'关键词。
这个关键词是为了用于图形用户界面，但当文档碰巧有正确的结构，没有什么能阻止你在文档使用。
像这样的样式单
div.container5 {
height: 10em;
display: flex;
align-items: center }
div.container5 p {
margin: 0 }
CSS level 3垂直及水平集中
我们可以同时将这两种方法扩展到水平及垂直居中
把段落弄成绝对定位的副作用是它只能够是它需要的宽度(当然除非我们给他一个特定的宽度).下面的例子正是我们想要的：
我们把只有一个字的段落居中("已居中！"), 所以段落的宽度跟那一个字的宽度是应该一模一样的。
黄色的背景是代表该段落确实只有跟内容一样宽。我们假设与以前相同的标记:
<div class=container4>
<p>Centered!
</div>
样式表在垂直居中方面跟先前的示例是相似的。可是我们现在把元素移到容器的中间，'left: 50%',然后同时在
'translate'转换时将它向左移动自己宽度的一半：
div.container4 {
height: 10em;
position: relative }
div.container4 p {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
下一个例子解释了需要 'margin-right: -50%'的原因
当CSS formatter 支持'flex', 便更容易
与此样式表:
div.container6 {
height: 10em;
display: flex;
align-items: center;
justify-content: center }
div.container6 p {
margin: 0 }
就是,唯一的补充是'justify-content: center'. 就像'align-items'确定垂直对齐
容器的内容， 'justify-content' 确认水平对齐. (它们实际上跟它们的名字一样是比较复杂，
只是以简单的角度看它们就是这样运作的) 其中一个'flex'的副作用是它的子元素, 在这情况下的P, 是会自动尽可能做得小。
CSS level 3 视口居中
绝对定位元素的默认容器就是视口(如果是浏览器的话，则是指浏览器窗口). 所以，把在视口的元素居中是很简单的。
这里是一个完整的例子. (此示例用了HTML5语法)
<html>
<style>
body {
background: white }
section {
background: black;
color: white;
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
</style>
<section>
<h1>Nicely centered</h1>
<p>This text block is vertically centered.
<p>Horizontally, too, if the window is wide enough.
</section>
你可以在 另外一个文件看到结果
'margin-right: -50%'需要补偿 'left:50%'. 规则'left'减少50%可用宽度元素。因此，
渲染器将尝试使文句不超过容器宽度的一半。这样说，元素的右边距离与右边有相同量地变得更接近，最大行长度跟容器的宽度相同。
尝试重新调教视窗大小: 你会看到如果视窗的宽度足够的话，每个句子会出现在每一行上。只有当视窗太窄，整个句子才会
分成几行。当您去掉'margin-right: -50%'及再重新调教视窗大小，虽然
视窗仍然比文字宽两倍，但您会看到那些句子已经分开了。
(利用 'translate' 来作视口居中是首先被"Charlie"在堆栈溢出的答案.)里提出
