未知盒子宽高使盒子垂直水平居中

Posted 2020-11-22 linxim

？？？注意：未知盒子宽高并不是盒子没有宽高,是不知道盒子宽高的具体值是多少。

垂直水平居中方法(transform:translate)

让我垂直水平居中

.parent{
position: relative;
width: 100px;
height: 100px;
border: 1px solid #ccc;
}

.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #ddd;
}

 

垂直水平居中方法(弹性布局)

让我垂直水平居中

.parent1{
display: flex;
justify-content: center;
align-items:center;
width: 200px;
height: 100px;
border: 1px solid #ccc;
}

.child1{
background: #ddd;
width: 100px;
height: 50px;
}

 

垂直水平居中方法(网格布局)

让我垂直水平居中

.parent2{
display: grid;
/* 在行中对齐方式 */
justify-items:center;
/* 在列中的对齐方式 */
align-items:center;
width: 200px;
height: 100px;
border: 1px solid #ccc;
}

.child2{ width: 100px;
height: 50px;
background: #ddd;
}

 

垂直水平居中方法(定位)

让我垂直水平居中

.parent3{ width:300px;
height: 100px;
position: relative;
border: 1px solid #ccc;
}

.child3{
width: 100px;
height: 50px;
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #ddd;
}