[CSS]水平垂直居中的几种方式

前言

好久不写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;
}

[CSS]水平垂直居中的几种方式

https://jetyu.me/post/css-center-style.html

作者

Jet Yu

发布于

2015-09-18

更新于

2015-09-18

许可协议

评论

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×