Question

div块级元素在块级原则中垂直居中问题

凡客logo是一个p标签的背景.红色区域是一个div.我想要logo垂直居中.但是怎么搞都不行 margin:auto auto只能水平居中.要是用内外边句话,红色div又变大了.除了绝对定位,有什么其他方法让他垂直居中吗?

Answer 1

尺寸你肯定知道，计算一下，或者调一下，可以使用padding属性。但是要注意盒模型。在html头部要定义一下，不然在不同的浏览器，div框会有被撑开的多余尺寸这种兼容问题。

假设div高80px。logo高度40px。
div的样式:padding:20px 0px;

追问

盒子模型怎么定义一下? 怎么样让内容不撑开我的盒子?

追答

这一块不是一两句话说得清的，具体你再找点资料脑补一下吧。

其实就是告诉浏览器用什么标准而已。没有告诉浏览器标准的话，就是混合模式，很容易出现兼容问题

Answer 2

display:table-cell;vertical-align:middle;
这个表示显示为表格模式的，，然后表格内居中，所以你应该吧这个放到外层div试试才对
或者
外面一层的样式 width:100%;height:100%;position:relative;top:0;left:0;
里面一层的样式width:400px;height:300px;position:absolute;left:50%;top:50%; margin-left:-200px;margin-top:-150px;