1.图片水平垂直居中 html:

css: .parent{ display: table } .parent .child { display: table-cell; *display: inline-block; text-align: center; vertical-align: middle; } .parent .child img{ border: none; width: 200px; height: 200px; vertical-align: middle; } 注： IE修复: *display: inline-block; 由于vertical-align属性与表格一起使用，我们将父DIV设置为display: table, 并将子DIV设置为单元格display: talbe-cell.然后我 们可以安全的使用vertical-align：middle 来垂直单元格中的内容.此方法适用于多行文本，容器DIV随内容动态增长，不幸的是不工作于IE6、IE7中。 2. 绝对定位和垂直拉伸 html:

content here

css: .parent { position: relative; } .parent .child { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 50％; height: 50％; } 注： 子DIV处于父DIV中，它的顶部，底部，左侧，右侧的值都设为0。因为子DIV的高度和宽度都设置为小于父DIV的高度和宽度，所以这种定位是不行的。将子DIV的4个边框都设置为auto会在顶部和底部以及左右两侧产生同等的边距，这导致子DIV同时水平和垂直居中，不幸的是IE7以下不支持。 3.填充 html:

content here

css: .parent { padding: 5％ 0; } .parent .child { padding: 10％ 0; } 注: 相同顶部和底部填充用于使子DIV在父DIV居中，并使子DIV中的文本居中。padding设置为"％"，允许两个DIV动态增长。 如果任何元素的高度都设置绝对测量，则需要一些数学知识来确保顶部和底部填充相同。虽然这个方法是在容器上设置paddings，你可以翻转事物，并在包含的元素中设置边距。 4.lineHeight html:

content here

css: .child { line-height: 200px; } 注: 垂直居中通过给子div（包含文本的那个）一个大于字体大小的行高来实现。有些也设置一个高度等于这个div上的行高，但我还没有发现它的必要。这将工作于垂直居中一行文本，但不会工作在多行文本。 5.定位和负边距 html:

css: .parent{ position: relative } .parent .child { position: absolute; top: 50％; left: 50％; width: 200px; height: 200px; margin: -100px 0 0 -100px; } 注: 子DIV通过定位和边距定位在父DIV中心，通过将子DIV的顶部和左侧的值设为50％，子DIV的左上角位于父DIV的中心。负顶部和左侧等于元素高度和宽度的一半，向上拉伸子DIV让它处于父DIV中心。此方法最适合于块级元素，并且它需要知道子DIV的维度。 6.浮动分区 html:

;

content here

css: .parent{ height: 200px; } .parent .floater { float: left; height: 50％; width: 100％; margin-bottom: -50px; border: 1px solid red; } .parent .child { clear: both; height: 100px; outline: 1px solid yellow; } 注: 这里，一个空的div设置为父div的一半高度并向左（或右）浮动。我们想要居中的div然后被清除，所以它的顶边将直接位于浮动div的底边下方。为了使子div的垂直中心向上，我们为浮动div添加一个负的下边距，它等于子div的一半高度。 7.借助translate()，此函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中. //html:

我不知道宽高，但是我就是要水平垂直居中

//css .wrap{ padding:10px; background:green; color:#fff; position:absolute; top:50％; left:50％; border-radius: 5px; -webkit-transform: translate(-50％,-50％); -moz-transform: translate(-50％,-50％); transform:translate(-50％,-50％); } 与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranlate（）函数中的百分比是相对于自身宽高的百分比，所以能进行居中。 但是兼容性不是很好：Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。 Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。 IE9以下不能使用哦，要注意这一点。