在html中,我們經(jīng)常需要將某些元素在頁面上上下居中,下面就來介紹html中如何實(shí)現(xiàn)上下居中。
/* 方法一 */ .parent { display: flex; align-items: center; /* 將子元素垂直居中 */ justify-content: center; /* 將子元素水平居中 */ } /* 方法二 */ .parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
以上是兩種常用的方法,方法一使用了flex布局,通過設(shè)置align-items和justify-content讓子元素在垂直和水平方向上都居中。方法二則是使用相對定位和絕對定位,將子元素的上邊框距離父元素頂部50%,再通過transform屬性將子元素上移自己高度的一半,從而達(dá)到垂直居中的效果。