1一列居中对齐
使用margin：0 auto；width: 90%;使其居中。一定要给宽度。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第八章-使用外边距让设计居中</title>
<style type="text/css">
.center{
width: 90%;
margin: 0 auto;
background-color: cadetblue;
}
</style>
</head>
<body>
<div class="center">
14岁的少女苏菲某天放学回家，收到了神秘的一封信——“你是谁？世界从哪里来？”与此同时，她收到一封古怪的明信片，上面的收件人是“请苏菲转交给席德（Hilde）”，邮戳来自黎巴嫩。
从这一天开始，苏菲不断接到一些极不寻常的来信，世界像谜团一般在她眼底展开。她运用少女天生的悟性与后天知识，企图解开这些谜团。然而，魔镜、少校的小屋、黎巴嫩寄来给席德明信片、会说话的汉密士、叫她席德的艾伯特、写着生日祝福的香蕉皮、现实出现的梦中的金十字架、捡到的10元硬币……接迥而至的奇闻怪事让苏菲一步步走下去。事实真相远比她所想的更怪异、 更离奇……
在一位神秘导师艾伯特的指引下，苏菲开始思索从古希腊到康德，从祁克果到弗洛伊德等各位大师所思考的根本问题。
莫名其妙的函授课程持续进行着，联络方式也一变再变，痛苦愤怒的艾伯特（Alberto Knox）终于出现在她的面前，并开始教她哲学史。他用浅显易懂的笔触带着苏菲回顾从先苏期的希腊直到尚-保罗·沙特时代的哲学发展。同时，“席德”的名字不断在她身边以不可思议的方式频繁出现。而后，席德出现了，原来苏菲这个人物，只是在黎巴嫩联合国部队工作的挪威少校艾伯特为庆祝女儿席德生日而虚构出来的人物，把她的故事编写成一个富有哲学趣味的故事当作女儿的生日礼物。
不可思议的是，在艾伯特的提示下，苏菲渐渐意识到自己只是书中的一个角色，是艾伯特少校意识的一部分，在忠实的完成自己主角的任务之余，他们开始了向上帝（艾伯特少校）的抗争。在他们的努力下，书中世界渐渐扭曲了，变得古怪而难以驾驭。最终，这本书以一个开放式的结局告终，艾伯特和苏菲莫名的逃出了书中世界，来到了席德所在的世界。
《苏菲的世界》的中文版（萧宝森译）中，部分内容被中国政府要求删除，如马克思部分结尾处的32个段落。
</div>
</body>
</html>
效果图如下
2.两列的浮动布局
给其定位元素的宽度，然后让他们向左向右浮动。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.content{
overflow: hidden;
width: 90%;
margin: 0 auto;
}
.primary{
float: right;
display: inline;
width: 80%;
background: cadetblue;
}
.secondary{
float: left;
display: inline;
width: 19%;
background: violet;
}
</style>
</head>
<body>
<div class="content">
<div class="primary">14岁的少女苏菲某天放学回家，收到了神秘的一封信——“你是谁？世界从哪里来？”与此同时，她收到一封古怪的明信片，上面的收件人是“请苏菲转交给席德（Hilde）”，邮戳来自黎巴嫩。
从这一天开始，苏菲不断接到一些极不寻常的来信，世界像谜团一般在她眼底展开。她运用少女天生的悟性与后天知识，企图解开这些谜团。然而，魔镜、少校的小屋、黎巴嫩寄来给席德明信片、会说话的汉密士、叫她席德的艾伯特、写着生日祝福的香蕉皮、现实出现的梦中的金十字架、捡到的10元硬币……接迥而至的奇闻怪事让苏菲一步步走下去。事实真相远比她所想的更怪异、 更离奇……
在一位神秘导师艾伯特的指引下，苏菲开始思索从古希腊到康德，从祁克果到弗洛伊德等各位大师所思考的根本问题。</div>
<div class="secondary">莫名其妙的函授课程持续进行着，联络方式也一变再变，痛苦愤怒的艾伯特（Alberto Knox）终于出现在她的面前，并开始教她哲学史。他用浅显易懂的笔触带着苏菲回顾从先苏期的希腊直到尚-保罗·沙特时代的哲学发展。同时，“席德”的名字不断在她身边以不可思议的方式频繁出现。而后，席德出现了，原来苏菲这个人物，只是在黎巴嫩联合国部队工作的挪威少校艾伯特为庆祝女儿席德生日而虚构出来的人物，把她的故事编写成一个富有哲学趣味的故事当作女儿的生日礼物。
不可思议的是，在艾伯特的提示下，苏菲渐渐意识到自己只是书中的一个角色，是艾伯特少校意识的一部分，在忠实的完成自己主角的任务之余，他们开始了向上帝（艾伯特少校）的抗争。在他们的努力下，书中世界渐渐扭曲了，变得古怪而难以驾驭。最终，这本书以一个开放式的结局告终，艾伯特和苏菲莫名的逃出了书中世界，来到了席德所在的世界。
《苏菲的世界》的中文版（萧宝森译）中，部分内容被中国政府要求删除，如马克思部分结尾处的32个段落。</div>
</div>
</body>
</html>
效果图如下：
3.三列的浮动布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.content{
overflow: hidden;
width: 90%;
margin: 0 auto;
}
.outprimary{
float: right;
width: 90%;
display: inline;
}
.outsecondary{
float: left;
width: 9%;
display: inline;
background: violet;
}
.outprimary .innerprimary{
float: left;
width: 90%;
display: inline;
background: cadetblue;
}
.outprimary .innersecondary{
float: right;
display: inline;
width: 9%;
background: papayawhip;
}
</style>
</head>
<body>
<div class="content">
<div class="outsecondary">14岁的少女苏菲某天放学回家，收到了神秘的一封信——“你是谁？世界从哪里来？”与此同时，她收到一封古怪的明信片，上面的收件人是“请苏菲转交给席德（Hilde）”，邮戳来自黎巴嫩。
从这一天开始，苏菲不断接到一些极不寻常的来信，世界像谜团一般在她眼底展开。她运用少女天生的悟性与后天知识，企图解开这些谜团。然而，魔镜、少校的小屋、黎巴嫩寄来给席德明信片、会说话的汉密士、叫她席德的艾伯特、写着生日祝福的香蕉皮、现实出现的梦中的金十字架、捡到的10元硬币……接迥而至的奇闻怪事让苏菲一步步走下去。事实真相远比她所想的更怪异、 更离奇……
在一位神秘导师艾伯特的指引下，苏菲开始思索从古希腊到康德，从祁克果到弗洛伊德等各位大师所思考的根本问题。</div>
<div class="outprimary">
<div class="innerprimary">在一位神秘导师艾伯特的指引下，苏菲开始思索从古希腊到康德，从祁克果到弗洛伊德等各位大师所思考的根本问题。
莫名其妙的函授课程持续进行着，联络方式也一变再变，痛苦愤怒的艾伯特（Alberto Knox）终于出现在她的面前，并开始教她哲学史。他用浅显易懂的笔触带着苏菲回顾从先苏期的希腊直到尚-保罗·沙特时代的哲学发展。同时，“席德”的名字不断在她身边以不可思议的方式频繁出现。而后，席德出现了，原来苏菲这个人物，只是在黎巴嫩联合国部队工作的挪威少校艾伯特为庆祝女儿席德生日而虚构出来的人物，把她的故事编写成一个富有哲学趣味的故事当作女儿的生日礼物。</div>
<div class="innersecondary">不可思议的是，在艾伯特的提示下，苏菲渐渐意识到自己只是书中的一个角色，是艾伯特少校意识的一部分，在忠实的完成自己主角的任务之余，他们开始了向上帝（艾伯特少校）的抗争。在他们的努力下，书中世界渐渐扭曲了，变得古怪而难以驾驭。最终，这本书以一个开放式的结局告终，艾伯特和苏菲莫名的逃出了书中世界，来到了席德所在的世界。
《苏菲的世界》的中文版（萧宝森译）中，部分内容被中国政府要求删除，如马克思部分结尾处的32个段落。</div>
</div>
</div>
</body>
</html>
效果图如下：
