前言

好久不写CSS和HTML了,今天想着总结一下水平垂直居中定位的几种方式。

绝对定位

1
2
3
4
5
6
7
8
.center_part{
margin: auto;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}

Flex布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#box1{
display: flex;
flex-flow: row nowrap;
justify-content: center;/*水平居中*/
align-items:center;/*垂直居中*/
width: 200px;
height: 200px;
background-color: red;
}

#box2{
width: 50px;
height: 50px;
background-color: yellow;
}