CSS實現完美垂直居中

2021-04-12 12:48:02 字數 592 閱讀 8516

之前看到很多人一直都問這個問題,不過當時我沒當一回事,因為在 css 中要垂直居中,多數是在有高度的情況下,或者容器高度不定的情況下才用,看上去比較舒服,而且實現的方法也不少,不一定要拘泥於和 table 布局一樣。不過最近有人問了幾個例子,看來對此的需求還不少。現在就把我經驗拿出來分享一下,希望大家鼓鼓掌。

首先,要有乙個概念:凡是 table 布局可以實現的,css 一定可以實現。css 可以實現的,table 未必能做到。

現在來幾個例子:

一、單行內容的居中

只考慮單行是最簡單的,無論是否給容器固定高度,只要給容器設定 line-height 和 height,並使兩值相等,再加上 over-flow: hidden 就可以了

.middle-demo-1

優點:1. 同時支援塊級和內聯極元素

2. 支援所有瀏覽器

缺點:1. 只能顯示一行

2. ie中不支援等的居中

要注意的是:

1. 使用相對高度定義你的 height 和 line-height

2. 不想毀了你的布局的話,overflow: hidden 一定要

為什麼?

請比較以下兩個例子:

CSS實現完美垂直居中

之前看到很多人一直都問這個問題,不過當時我沒當一回事,因為在 css 中要垂直居中,多數是在有高度的情況下,或者容器高度不定的情況下才用,看上去比較舒服,而且實現的方法也不少,不一定要拘泥於和 table 布局一樣。不過最近有人問了幾個例子,看來對此的需求還不少。現在就把我經驗拿出來分享一下,希望大...

CSS實現完美垂直居中

之前看到很多人一直都問這個問題,不過當時我沒當一回事,因為在 css 中要垂直居中,多數是在有高度的情況下,或者容器高度不定的情況下才用,看上去比較舒服,而且實現的方法也不少,不一定要拘泥於和 table 布局一樣。不過最近有人問了幾個例子,看來對此的需求還不少。現在就把我經驗拿出來分享一下,希望大...

CSS實現垂直居中

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