「这是我参与11月更文挑战的第十一天,活动详情查看:2021最后一次更文挑战」。
往期推荐:
前言
居中布局相信各位要用的场景算是比较多得了,大到类似登录页,小到按钮中的一个小图标,都需要达到居中的效果。今天就带大家来具体看一看居中布局的实现方法。
居中布局
居中布局实现的方式可以说是有很多种,今天就给大家大家说一比较常用的方式,和一种比较经典的方式。
代码如下:
<div class="layout">
<div class="layout-content"></div>
</div>
.layout {
width: 1000px;
height: 800px;
background: gray;
.layout-content {
width: 200px;
height: 200px;
background-color: crimson;
}
}
通过position的方法实现
这种方法呢,可以说是一种非常经典的方法了,通过绝对定位偏移父节点上左的50%,在通过transform偏移自身的-50%即可。不过,看完全篇文章你会发现,相较于display:flex;来说还是相对繁琐的,不过具体场景具体方法,这就看自己的判断了。偷偷说一句,flex大法好。
.layout {
position: relative;
layout-content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
通过display:flex的方法实现
通过display:flex的方法,相信各位用到的算是非常多的,他也算是所有居中布局中最强的了,没有之一,并且代码非常简单。
.layout {
display: flex;
justify-content: center;
align-items: center;
}
对了,还有骚操作同样可以实现居中布局,可以说是史上最简。Mark,Mark。
.layout {
display: flex;
.layout-content {
margin: auto;
}
}
好,今天就到这里了,今天努力的你依然是最棒的。加油,加油,你最棒!加油,加油,你最强!哦豁,Bye Bye!!!