css實現垂直居中

2022-07-01 22:33:15 字數 497 閱讀 4601

一、單行內容的居中

設定height與line-height相等,overflow:hidden即可。

.demo {

height: 20px;

line-height: 20px;

overflow: hidden;

注:若不使用overflow:hidden,在瀏覽器頁面縮放時會出現問題。

二、div垂直居中

注意:子盒子用絕對定位的話,父盒子要加上相對定位 position:relative;

.box {

position: absolute;

top: 50%;

left: 50%;

z-index: 9999;

width: 200px;

height: 200px;

margin-top: -100px;

margin-left: -100px;  

CSS實現垂直居中

1 最簡單的單行文字line height垂直居中 2 垂直居中,使用line height和vertical align middle 3 使用table布局,display table和display table cell xx 4 絕對居中,使用margin auto和top bottom l...

CSS實現垂直居中

hack技術就可以啊!所以在這裡我還要囉嗦兩句,css中的確是有vertical align屬性,但是它只對 x html元素中擁有valign特性的元素才生效,例如 元素中的 等,而像 這樣的元素是沒有valign特性的,因此使用vertical align對它們不起作用。一 單行垂直居中 如果乙...

css實現垂直居中

還可以參看文章 不需要知道子元素的尺寸 方法一 單行文字居中 line height height 方法二 父元素使用display table和子元素使用display table cell屬性來模擬 子元素設定vertical align middle vertical align屬性只對行內元...