原始网址：http://www.w3schools.com/css/css_align.asp
翻译：
CSS Layout - Horizontal & Vertical Align
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
font-size: 30px;
font-weight: 400;
margin: 10px 0;
font-family: "Segoe UI",Arial,sans-serif;
}
</style>
</head>
<body>
<div style="border:3px solid green; max-width:500px; margin: auto; padding: 15px">
<h2>In CSS, several properties can be used to align elements horizontally and vertically.</h2>
</div>
</body>
</html>Center Align Elements
水平居中块级元素，我们可以使用 margin: auto; 。
设置元素的宽度以组织其延伸到容器的边界。
元素将占据指定的宽度，剩余空间将被均分给左、右外边距（margin-left 和 margin-right）：
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>
<div class="center">
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>
</body>
</html>注意：如果 width 属性没有设置（或设置为 100%），居中排列将没有效果。
Center Align Text
仅对元素内的文本居中，我们可以使用 text-align: center; 。
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Center Text</h2>
<div class="center"><p>This text is centered.</p></div>
</body>
</html>提示：有关更多如何居中文本的示例，请访问 CSS Text 章节。
Center an Image
居中图片，我们可以使用 margin: auto; 并且使它成为 block 元素：
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<h2>Center an Image</h2>
<p>To center an image, use margin: auto; and make it into a block element:</p>
<img src="http://www.w3schools.com/css/paris.jpg" alt="Paris" style="width: 40%">
</body>
</html>Left and Right Align - Using position
排列元素的方法之一是使用 position ：
<!DOCTYPE html>
<html>
<head>
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<h2>Right Align</h2>
<p>An example of how to right align elements with the position property:</p>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>
</body>
</html>注意：绝对定位的元素将不再遵从常规流（normal flow），并且它可以与元素重叠。
提示：当使用 position 进行元素排列的时候，我们通常会对 <body> 元素定义 margin 和 padding 。这是为了避免在不同浏览器中的视觉差异。
然而，当使用 position 的时候，在 IE8 以及早期版本中仍存在一个问题。如果容器元素（在我们的示例 <div class="container"> 中）有指定的宽度而 !DOCTYPE 却没有声明，IE8 以及早期版本的浏览器会对右边距增加 17px 。这个空间大概是给滚动条预留的。因此，在使用 position 的时候要声明 !DOCTYPE ：
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}Left and Right Align - Using float
排列元素的另一种方法是使用 float 属性：
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}提示：当使用 float 进行元素排列的时候，我们通常会对 <body> 元素定义 margin 和 padding 。这是为了避免在不同浏览器中的视觉差异。
然而，当使用 float 的时候，在 IE8 以及早期版本中仍存在一个问题。如果容器元素（在我们的示例 <div class="container"> 中）有指定的宽度而 !DOCTYPE 却没有声明，IE8 以及早期版本的浏览器会对右边距增加 17px 。这个空间大概是给滚动条预留的。因此，在使用 float 的时候要声明 !DOCTYPE ：
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}Center Vertically - Using padding
在 CSS 中，垂直居中元素的方法有很多种，最简单的解决方式是使用上、下内边距（padding-top 和 padding-bottom）：
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Center Vertically</h2>
<p>In this example, we use the padding property to center the div element vertically:</p>
<div class="center"><p>I am vertically centered.</p></div>
</body>
</html>垂直、水平居中元素，我们可以使用 padding 和 text-align: center：
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
</style>
</head>
<body>
<h2>Centering</h2>
<p>In this example, we use padding and text-align to center the div element vertically and horizontally:</p>
<div class="center"><p>I am vertically and horizontally centered.</p></div>
</body>
</html>Center Vertically - Using line-height
另一种伎俩是使 line-height 属性与 height 属性的值相等：
<!DOCTYPE html>
<html>
<head>
<style>
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>Centering</h2>
<p>In this example, we use the line-height property with a value
that is equal to the height property to center the div element:</p>
<div class="center"><p>I am vertically and horizontally centered.</p></div>
</body>
</html>Center Vertically - Using position & transform
如果 padding 和 line-height不是一种选择，第 3 种解决方式是使用定位和 transform 属性：
<!DOCTYPE html>
<html>
<head>
<style>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Centering</h2>
<p>In this example, we use positioning and the transform property
to vertically and horizontally center the div element:</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
<p>Note: The transform property is not supported in IE8 and earlier versions.</p>
</body>
</html>提示：在 2D Transforms Chapter 章节中，你将学习到更多与 transform 属性相关的知识。