如何让div中的div垂直居中

2025-04-25 03:04:21

推荐回答（3个）

回答1：

通过设置外层div的padding上下边距，来达到垂直居中。


	




我是外面的div
    
		我是里面的div

回答2：



    
    div垂直居中
    
        *{
            margin:0;
            padding:0;
        }
        div.container{
            background-color:pink;
            border:2px solid #000;
            width:500px;
            height:500px;
            margin:50px auto;
            display:table;    
        }
        div.wrapper{
            display:table-cell;
            vertical-align:middle;
        }
        div.wrapper img{
            border:1px solid #ddd;
        }  
    


    
            
                垂直居中

回答3：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.parent {
width:800px;
height:500px;
border:2px solid #000;
position:relative;
}
.child {
width:200px;
height:200px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-color: red;
}

方法2：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.parent {
width:800px;
height:500px;
border:2px solid #000;
display:table-cell;
vertical-align:middle;
text-align: center;
}
.child {
width:200px;
height:200px;
display:inline-block;
background-color: red;
}