因为要准备找工作了,所以对前端中的一些基础东西进行了复习,也是看到哪儿就写到哪儿吧,仅供自己参看。
这里主要是对元素居中的几种方案的总结:
元素居中
这里放上Html代码
<div class="test">
<div class="center"></div>
</div>
1 定位实现元素居中
body{
height: 700px;
margin: 0;
padding: 0; }
.test{
background-color: #008c8c;
width:100%
height: 100%;
position: relative;
}
.center{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
2 tranform实现居中
.center{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);}
3 margin法实现元素居中
.center{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100Px; }
flex实现元素居中
flex方法主要是针对父级元素,将其排列方式变成flex布局,通过设置其子元素在水平方向和垂直方向排列方式为居中排列,达到实现元素居中排列的目的。
body{
height: 700px;
margin: 0;
padding: 0;
}
.test{
background-color: #008c8c;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center; }
.center{
width: 200px;
height: 200px;
background-color: pink;
}