在div容器中可以放置任意内容，Eg：一段文本，一张图片，一个表格，甚至另一个子容器div等。使用属性text-align：center可以设置容器中的内容（包括表格）水平居中，这样的属性针对普通内容，比如文本或图片都是生效的，但是如果容器中放置的子元素仍然还是一个容器，那么单纯地设置text-align：center是不会生效的，text-align：left或right亦然。如果也需要水平居中对齐，就需要在div的外面再套一个更大的div容器，让外面的div容器实现水平居中即可。通过案例4-4,example04.html来体验,效果如图4-6所示。
例4-4 example04.html
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>盒子的宽度</title> <style> #divouter{ width: 640px; height: 220px; border: solid 5px aqua; margin: 0 auto;} .divinner{width: 300px; height: 200px; border: solid 5px red; float: left;margin: 5px; } </style> </head> <body> <div id="divouter"> <div></div> <div></div> </div> </body> </html> | ||
| | ||
图4-6 多个盒子模型水平居中
注意：
盒子实际宽度（高度）=内容（content）+边框（border）+间隙（padding）+间隔（margin）。对于任何一个元素设置width和height控制内容大小，也可以分别设置各自的边框（border）、间隙（padding）、间隔（margin）。灵活设置这些盒子的这些属性，可以实现各自排版效果
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距