html垂直水平,html中3种水平垂直方式的比较

码农公社  210.net.cn  210= 1024  10月24日一个重要的节日--码农(程序员)节

1 绝对定位 + 转换

绝对定位 + 转换

.parent

{

position: relative;

width: 400px;

height: 400px;

background: skyblue;

}

.child

{

position: absolute;

left: 50%;   top: 50%;

transform: translate(-50%, -50%);

width: 200px;   height: 200px;

background: pink;

}

2 弹性模型

弹性模型

.parent

{

display: flex;

justify-content: center;

align-items: center;

width: 400px;

height: 400px;

background: skyblue;

}

.child

{

width: 200px;

height: 200px;

background: pink;

}

3 单元格方式

单元格方式

.parent

{

display: table-cell;

text-align: center;

vertical-align: middle;

width: 400px;

height: 400px;

background: skyblue;

}

.child

{

display: inline-block;

width: 200px;

height: 200px;

background: pink;

}