CSS设置DIV垂直居中的N种方法兼容IE浏览器(2)

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

导读：divbr pre现在我们要使这段文字垂直居中显示！ /prebr /div /body /html 三、多行文本固定高度的居中在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS

　　<div><br>　　　　<pre>现在我们要使这段文字垂直居中显示！

　　　　</pre><br>　　</div>

</body>

</html>

三、多行文本固定高度的居中

在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：

CSS Code复制内容到剪贴板

div#wrap {

height:400px;

display:table;

}

div#content {

vertical-align:middle;

display:table-cell;

border:1px solid #FF0099;

background-color:#FFCCFF;

width:760px;

}

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

<html>

<head>

　　<title> 多行文字实现垂直居中 </title>

　　　　body { font-size:12px;font-family:tahoma;}

　　　　div#wrap {

　　　　height:400px;

　　　　display:table;

　　　　}

　　　　div#content {

　　　　vertical-align:middle;

　　　　display:table-cell;

　　　　border:1px solid #FF0099;

　　　　background-color:#FFCCFF;

　　　　width:760px;

　　　　}

　　</style>

</head>

<body>

（编辑：ASP站长网）

CSS设置DIV垂直居中的N种方法 兼容IE浏览器(2)

CSS设置DIV垂直居中的N种方法兼容IE浏览器(2)