|
table自带功能
<table class = "content">
<tr>
<td>
这是一串文字
</td>
</tr>
</table>
运用translate
<div id = "content">
<div id = "cell">
这是一串文字
</div>
</div>
#content{position:relative}
#cell{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
运用display:flex
<div id = "content">
<div id = "cell">
这是一串文字
</div>
</div>
#content{
display:flex;
justify-content:center;
align-items:center;
}
把div的表示设置设为表格
<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，前提css中的高度固定，把它的top设置为50%，top-margin设置为负的content高度，由于有固定的高度，给content指定overflow:auto，这般倘若content太多的话，就会显现滚动条，以避免content溢出。
<div id = "content">
content goes here
</div>
#content{
position:aosolute;
top:50%;
height:240px;
margin-top:-120px;
}
运用一个position:absolute,有固定宽度和高度的div，这个div被设置为top:0,bottom:0,由于有固定高度，并不可和上下的间距都为0，因此呢margin:auto,会使它居中。
<div id= "content">
content goes here
</div>
#content {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:240px;
width:200px;
}
只能将单行文本居中，只需建，简单的将line-height设置为那个对象的height值就能够了
运用tent"> content goes here </div>
#content{
height:100px;
line-height:100px;
}
| 
发表于 2024-6-30 06:17:02
楼主