java cell设置绝对位置_524 垂直居中布局：table-cell+vertical-align，绝对定位position，flex + align-items...

垂直居中布局解决方案1 - table-cell+vertical-align

垂直居中布局解决方案1 - table-cell+vertical-align

* {

margin: 0;

padding: 0;

}

#parent {

width: 200px;

height: 600px;

background: #ccc;

}

#child {

width: 200px;

height: 200px;

background: #c9394a;

/* 垂直居中 */

line-height: 200px;

}

水平垂直居中布局

垂直居中布局解决方案2 - 绝对定位position

垂直居中布局解决方案2 - 绝对定位position

* {

margin: 0;

padding: 0;

}

#parent {

width: 200px;

height: 600px;

background: #ccc;

position: relative;

}

#child {

/* 定位 - 参照物 父元素 */

width: 200px;

height: 200px;

background: #c9394a;

position: absolute;

top: 50%;

/* margin-top:-100px; */

transform: translateY(-50%);

}

垂直居中布局解决方案3 - flex + align-items

垂直居中布局解决方案3 - flex + align-items

* {

margin: 0;

padding: 0;

}

#parent {

width: 200px;

height: 600px;

background: #ccc;

display: flex;

/* 垂直排列 */

align-items: center;

}

#child {

width: 200px;

height: 200px;

background: #c9394a;

}