代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test
</title>
<style type="text/css">
#container{
width: 500px;
height: 500px;
background-color: blue;
margin: 0 auto;
text-align: center;
position: relative;
}
#wrapper{
width: 300px;
height: 200px;
background-color: yellow;
position: absolute;
top: 50%;
margin-top: -100px;
}
#word{
width: 200px;
height: 100px;
line-height: 100px;
background-color: green;
color: pink;
margin: 0 auto;
}
#test2{
width: 300px;
height: 300px;
background-color: orange;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#more-lines{
background-color: yellow;
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<p id="word">Only one line.
</p>
</div>
</div>
<div id="test2">
<p id="more-lines">
Much more lines.Much more lines.Much more lines.Much more lines.Much more lines.Much more lines.Much more lines.Much more lines.
</p>
</div>
</body>
</html>
效果如下
转载请注明原文地址: https://ju.6miu.com/read-19896.html
