css垂直居中浮动元素_css 浮动上下居中

1、flex布局垂直居中

.div {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center;     /* 垂直居中 */
            width: 1000px;
            height: 600px;
        }
1
2
3
4
5
6
7

2、绝对定位垂直居中
已知子元素宽高

.div1{  
width:200px;  
height:200px;  
position:absolute;//父元素要相对定位  
left:50%;
top:50%;
margin-left:-100px;//自身宽高一半的复负值
margin-top:-100px;
}
1
2
3
4
5
6
7
8
9

未知子元素的宽高

.div2{  
width:200px;  
height:200px;  
position:absolute;//父元素要相对定位  
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
}
1
2
3
4
5
6
7
8
9
10

.div3{

position: absolute;

left: 50%;

transform: translateX(-50%); /* 移动元素本身50% */

}
1
2
3
4
5
6
7
8
9

.div4{
			display:table-cell;
            vertical-align: middle;
            text-align: center;
}
1
2
3
4
5