Posted Vue涓枃绀惧尯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了相关的知识，希望对你有一定的参考价值。
璁╀竴涓猟iv鎴栬€呬竴娈垫枃瀛椾害鎴栬€呬竴寮犵収鐗囧眳涓樉绀虹殑闂锛岄潰璇曠殑杩囩▼涓篃缁忓父琚棶鍒般€?/span>鐩镐俊澶у閮芥棩甯哥殑甯冨眬涔熺粡甯镐細鐢ㄥ埌锛屽洖绛斿嚭涓笁涓ょ瑙ｅ喅鏂规浜︿笉鏄毦浜嬨€?/span>浣嗕粖澶╂垜缁嗙┒浜嗕竴涓嬶紝鍙戠幇杩樻湁鏂板ぇ闄嗗彲瀵伙紝鐗规剰鐣欐鍗氭枃鎬荤粨涓€涓嬶紝涓庡悰鍒嗕韩锛?/span>濡傛灉浣犳湁鏂扮殑鏂规硶锛屾杩庤ˉ鍏咃紒馃憦馃憦馃憦
鎴戜滑鍏堜粠鍥哄畾瀹介珮鐨刣iv寮€濮?/span>
<div class="wrapper">
<div class="content"></div>
</div>
.content{
margin: 0 auto;
padding: 50px;
width: 100px;
height: 100px;
background-color: red;
}
.wrapper{
position: relative;
}
.content{
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
background-color: red;
}
.content{
margin: calc((100% - 100px) / 2);
width: 100px;
height: 100px;
background-color: red;
}
.wrapper{ position: relative; }.content{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100px; height: 100px; background-color: red;}
.content{
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
transform: translate(-50%,-50%);
background-color: red;
}
.wrapper{
display: flex;
justify-content: center;
align-items: center;
}
.wrapper{
display: table-cell;
vertical-align: middle;
}
.content{
margin: 0 auto;
}
<table style="table-layout:fixed; width: 400px;">
<tr>
<td height="400" align="center" valign="middle">
<div class="content"></div>
</td>
</tr>
</table>
.wrapper{
width: 400px;
height: 400px;
text-align: center;
border: 2px solid blue;
}
.wrapper:after{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.content{
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
background-color: red;
}
<div class="wrapper">
<div class="content"></div>
<div class="brother"></div>
</div>
.wrapper{
width: 400px;
height: 400px;
text-align: center;
border: 2px solid blue;
}
.content, .brother {
display: inline-block;
vertical-align: middle;
}
.content {
width: 100px;
height: 100px;
background-color: red;
}
.brother {
height: 400px;
}
.wrapper{
width: 400px;
height: 400px;
text-align: center;
border: 2px solid blue;
background-image: url('./bg.jpg');
background-repeat: no-repeat;
background-position: center;
}
以上是关于的主要内容，如果未能解决你的问题，请参考以下文章