CSS实现垂直居中的几种办法
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">table自带功能</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><table class = "content">
<tr>
<td>
这是一串文字
</td>
</tr>
</table></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span>translate</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div id = "content">
<div id = "cell">
这是一串文字
</div>
</div>
#content{position:relative}
#cell{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span>display:flex</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div id = "content">
<div id = "cell">
这是一串文字
</div>
</div>
#content{
display:flex;
justify-content:center;
align-items:center;
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">把div的<span style="color: black;">表示</span>设置设为表格</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div id = "wrapper">
<div id = "cell">
<div class = "content">
content goes here
</div>
</div>
</div>
#wrapper {display:table}
#cell {display:table-cell; vertical-align:middle;}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span>绝对定位的div，前提css中的高度固定，把它的top设置为50%，top-margin设置为负的content高度，<span style="color: black;">由于</span>有固定的高度，给content指定overflow:auto，<span style="color: black;">这般</span><span style="color: black;">倘若</span>content太多的话，就会<span style="color: black;">显现</span>滚动条，<span style="color: black;">以避免</span>content溢出。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div id = "content">
content goes here
</div>
#content{
position:aosolute;
top:50%;
height:240px;
margin-top:-120px;
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span>一个position:absolute,有固定宽度和高度的div，这个div被设置为top:0,bottom:0,<span style="color: black;">由于</span>有固定高度，并<span style="color: black;">不可</span>和上下的间距都为0，<span style="color: black;">因此呢</span>margin:auto,会使它居中。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div id= "content">
content goes here
</div>
#content {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:240px;
width:200px;
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">只能将单行文本居中，只需建，简单的将line-height设置为那个对象的height值就<span style="color: black;">能够</span>了</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">运用</span>tent"> content goes here </div>
#content{
height:100px;
line-height:100px;
}</div>
论坛是一个舞台，让我们在这里尽情的释放自己。 这篇文章真的让我受益匪浅，外链发布感谢分享！ 论坛外链网http://www.fok120.com/ 你的话语如春风拂面，让我感到无比温暖。 你字句如珍珠，我珍藏这份情。
页:
[1]