色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css dom 垂直居中

洪振霞2年前15瀏覽0評論

CSS中,讓元素水平居中是比較簡單的,主要有以下幾種方法:

/* 方法1:設置寬度和margin */
div {
width: 400px;
margin: 0 auto;
}
/* 方法2:使用 flex */
.container {
display: flex;
justify-content: center;
}
.container div {
/* 設置寬度 */
}

但是讓元素垂直居中,就比較麻煩了,特別是元素高度未知或者不定高的情況下。以下是一些實現垂直居中的方法:

/* 方法1:使用絕對定位和偏移量 */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 方法2:使用 flex */
.parent {
display: flex;
align-items: center;
justify-content: center;
}
/* 方法3:使用 table-cell */
.parent {
display: table-cell;
vertical-align: middle;
}
/* 方法4:使用 :before 或 :after 偽元素 */
.parent {
position: relative;
}
.parent:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.child {
display: inline-block;
vertical-align: middle;
}

需要注意的是,以上方法都是針對固定高度的元素來進行的,如果需要實現可變高度的元素垂直居中,可以使用 flex 或者 table-cell 的方式來實現。