前言:
通常我们将元素左右居中的方式是一项非常简单的任务:
当元素的属性为or-block时,即使变成(block)元素,也要使用text-align:左右居中。
如果元素的属性是block,设置-left和-right为auto,使元素左右居中。
但是,上下居中并不是那么容易。本文将总结上、下、左、右三种常用的居中方法。本文总结了来自的视频教程。
准备工作:
.background{
background-image: url(./pic.png);
background-repeat: no-repeat;
background-size: 100vh;
height: 100vh;
}
img{
height:100px;
}
*{
margin: 0;
padding:0;
}
方法一:
第一:
img{
position: absolute;
top:50%;
left:50%;
}
此时狗头的左上角会在屏幕中央。
所以我们要把狗头大小的50%往上和左移动,这样狗头的中心就可以放在屏幕的中心,我们使用属性方法:
img{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
/* 等同于transform: translateX(-50%) translateY(-50%); */
}
方法二:弹性布局
这可能是最简单的方法,在容器中添加以下属性:
.background{
display: flex;
justify-content: center;/*水平轴*/
align-items: center;/*垂直轴*/
}
方法3:表格
HTML 的 Table 元素有一个用于设置垂直对齐的属性。我们也可以通过CSS将其他元素的属性设置为table,以Table的形式显示。
首先,将 body 做成一个表格:
body{
width: 100%;
height: 100vh;
display: table;
}
.background{
}
img{
}
然后,将狗的头部容器设置为单元格:
body{
width: 100%;
height: 100vh;
display: table;
}
.background{
display: table-cell;
}
此时:
然后,将狗头所在的单元格垂直居中:
body{
width: 100%;
height: 100vh;
display: table;
}
.background{
display: table-cell;
vertical-align: middle;
}
img{
}
最后,将狗的头部水平居中。
body{
width: 100%;
height: 100vh;
display: table;
}
.background{
display: table-cell;
vertical-align: middle;
text-align: center;/*单元格是行内元素*/
}
img{
}
上面的过程,简单来说就是将body做成一个只有一个单元格的表格,然后将单元格垂直居中,最后将单元格内容水平居中。
注意:不要以为将body设置为table会影响其他元素。这只是一个例子。只要满足三级嵌套元素结构,就可以设置为:表格-单元格-要居中的元素。例如:div>div>div也是可以的。
© 版权声明
本站下载的源码均来自公开网络收集转发二次开发而来,
若侵犯了您的合法权益,请来信通知我们1413333033@qq.com,
我们会及时删除,给您带来的不便,我们深表歉意。
下载用户仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,访问及下载者下载默认同意本站声明的免责申明,请合理使用切勿商用。
THE END
暂无评论内容