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