全面总结使用CSS实现水平垂直居中效果的方法(4)

发布时间：2020-03-17 09:47 所属栏目：52 来源：站长网

导读：这种方法在现代浏览器下是非常方便。但是在IE6-7中是不被支持的，因为display:table在IE6-7中不被支持，那么为了解决这种方法在IE6-7的兼容，需要额外增加一个div，并使用hack，下面我们一起来看看其解决办法。 HTM

这种方法在现代浏览器下是非常方便。但是在IE6-7中是不被支持的，因为display:table在IE6-7中不被支持，那么为了解决这种方法在IE6-7的兼容，需要额外增加一个div，并使用hack，下面我们一起来看看其解决办法。

HTML Markup

XML/HTML Code复制内容到剪贴板

<div class="content">content</div>

</div>

CSS Code

CSS Code复制内容到剪贴板

.table {

height: 300px;/*高度值不能少*/

width: 300px;/*宽度值不能少*/

display: table;

position: relative;

float:left;

}

.tableCell {

display: table-cell;

vertical-align: middle;

text-align: center;

padding: 10px;

*position: absolute;

*top: 50%;

*left: 50%;

}

.content {

*position:relative;

*top: -50%;

*left: -50%;

}

还有一种方法、有点新意，用这种方法你需要在居中元素前面放一个空的<div>（块元素就可以），然后设置这个<div>的高度为50%，margin-bottom为元素高度的一半，而且居中元素需要清除浮动。需要注意的是，使用这种方法，如果你的居中元素是放在body中的话，你需要给html,body设置一个“height:100%”的属性。

HTML Markup

XML/HTML Code复制内容到剪贴板

<body>

<div id="content">Content section</div>

</body>

CSS Code

CSS Code复制内容到剪贴板

html,body {height: 100%;}

#floater{

float:left;

height:50%;/*相对于父元素高度的50%*/

margin-bottom: -120px;/*值大小为居中元素高度的一半（240px/2）*/

}

#content {

clear:both;/*清除浮动*/

height: 240px;

position: relative;

}

优点：

这种方法能兼容所有浏览器，在没有足哆空间下，内容不会被切掉

缺点：

元素高度被固定死，无法达到内容自适应高度，如果居中元素加上overflow属性，要么元素出现滚动条，要么元素被切掉；另外就是一个不算缺点的缺点，那就是加了一个空标签。

方式五：display:inline-block
这种方法是采用的display:inline-block，然后借助另一个元素的高度来实现居中

Html Markup

XML/HTML Code复制内容到剪贴板

（编辑：ASP站长网）