CSS樣式表可以使網(wǎng)頁更加美觀和優(yōu)雅。其中,background屬性可以設(shè)置網(wǎng)頁的背景。然而,如何設(shè)置css中背景垂直居中呢?
.background { background-image: url('example.jpg'); /*設(shè)置背景圖片*/ background-repeat: no-repeat; /*不重復(fù)*/ background-position: center center; /*定位背景圖片的位置*/ background-size: cover; /*使背景圖片始終充滿屏幕*/ display: flex; /*設(shè)置元素為彈性盒模型*/ justify-content: center; /*水平居中*/ align-items: center; /*垂直居中*/ }
可以看到,垂直居中的方法是將元素設(shè)置為彈性盒模型,然后再設(shè)置 justify-content 和 align-items 屬性。其中,justify-content設(shè)置水平居中,align-items則設(shè)置垂直居中。
通過這種方式,可以使css中背景垂直居中,讓網(wǎng)頁看起來更加美觀。同時,還可以對背景圖片進行自適應(yīng),使其始終充滿屏幕。