1.利用定位position和transform
*{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
.father{
height: 100%;
width: 100%;
background-color: red;
}
.son{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
background-color: skyblue;
}
html部分
<div class="father">
<div class="son">
</div>
</div>
2.或者利用margin-top 负的自身的一半
此时需要知道盒子的大小
利用相对定位使自身偏移父盒子大小的一般,然后利用margin-top或margin-left的负值将自身再平移回去。
.father{
height: 100%;
width: 100%;
background-color: red;
}
.son{
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px
width: 200px;
height: 200px;
background-color: skyblue;
}
3.利用弹性盒子flex属性
通过对父盒子定义flex,使子元素为伸缩盒子,再利用
align-itema:center; 使得元素垂直居中
justify-conter:ceneter; 使得盒子中的元素水平居中
*{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
.father{
height: 100%;
width: 100%;
background-color: red;
display: flex;
align-items: center; /*定义子元素垂直居中 */
justify-content: center; /*定义子元素水平居中 */
}
.son{
width: 200px;
height: 200px;
background-color: skyblue;
}
最后使用css书写顺序的规范
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)