本文共 1795 字，大约阅读时间需要 5 分钟。
使用margin:0 auto
上下为0，左右自适应的css样式。要让div水平居中，那么除了设置css margin:0 auto外，还不能再设置float，不然将会导致div靠左（设置float:left）和div靠右（设置float:right）。
========
内容居中分为div内容水平居中与div内容垂直居中。
div内容居中，只需要设置一个内容居中css（text-align:center）、内容垂直居中（line-height）即可。
1、div内容水平居中
CSS： text-align:center无论是p还是div都可以对其设置此CSS实现对应对象内的内容水平居中。
2、div内容垂直居中
行高属性： line-height 要让div内只有一行的内容垂直居中，通常对div设置的height(高)与line-height(行高)相同，即可实现div内容垂直居中。========
让div在div中居中，需要居中的div设置margin:0 atuo即可（当然也不要设置float）。
========
默认情况下DIV是独占一排的，DIV不设置任何CSS样式，这个DIV盒子都会独占一行自动换行。
使用CSS让两个DIV并排显示，排成一排显示常见方法有两种：
1、使用display:inline 2、使用float一、使用display:inline
对div设置display:inline即可实现div不换行，而是并排显示，不会独占一排。
示范代码：
<style>
div{ display:inline} </style> ...... <body> <div>内容1；内容1；</div> <div>内容2；内容2；</div> </body> 使用display:inline，其实是去掉了div默认display:block（块 独占一行 对象换行）属性。 二、css 浮动 float让两个div并排显示float:left或float:right，靠左和靠右可以让DIV失去默认独占一行属性，所以使用float可以让div并排显示。
示例代码
<style>
div{ float:left} </style><body>
<div>内容1；内容1；</div> <div>内容2；内容2；</div> </body> 三、div并排总结 div并排很多时候用到，比如左右结构DIV布局，一般采用float设置靠左和靠右，如果多个DIV并排而不使用float，可以采用display:inline实现div不换行。========
在制作DIV+CSS页面时候，会遇到文字超出固定的高度，内容溢出。
设置类如：.STYLE1 { width:150px; height:80px;color: #000000; border:1px solid #FF0000;}，文字不知道需要多少个文字才刚好不超过设置的红色边框，结果文字或图片大了就超过设置的BOX（CSS盒子）高和宽。
解决让文字不超出CSS盒子的固定高宽，只需要在此CSS类加入overflow:hidden;样式即可，加入后CSS类：.STYLE1 { width:150px; height:80px;color: #000000; border:1px solid #FF0000;overflow:hidden;}
这样文字就将不会溢出超出设置固定的高和宽区。
Overflow是检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
Overflow语法：
overflow : visible | auto | hidden | scrollOverflow参数：
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条 hidden : 不显示超过对象尺寸的内容 scroll : 总是显示滚动条 ========
转载地址：http://xofy.baihongyu.com/