vscode使用SFTP上传vue打包项目
在VSCode中安装并启用SFTP插件,配置好远程服务器信息后,通过拖拽文件到VSCode界面即可实现上传到远程服务器。
<div class="wrap">
<div class="item"></div>
</div>
第一种:利用绝对定位,
top
和left
50%,然后再利用margin-left
和margin-top
把盒子移动其宽高的一半实现
.wrap {
position: relative;
width: 200px;
height: 200px;
}
.item {
position: absolute;
top: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
第二种:利用绝对定位
top
,right
,bottom
,left
设置为 0,然后再利用margin:auto
实现
.wrap {
position: relative;
width: 200px;
height: 200px;
}
.item {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
第三种:宽高已知,利用绝对定位,
top
,left
设置 50%,然后再利用 CSS3 属性transform:translate(-50%,-50%)
实现
.wrap {
position: relative;
width: 200px;
height: 200px;
}
.item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
第四种:利用弹性盒模型,主轴交叉轴居中实现
.wrap {
display: flex;
justify-content: center;
align-items: center;
}
第五种:利用
grid
实现
.wrap {
display: grid;
justify-content: center;
align-items: center;
}
第六种:利用 table 实现
.wrap {
display: table-cell;
vertical-align: middle;
}
.item {
margin: auto;
}