用 CSS 實現元素垂直居中,有哪些好的方案?

2021-09-29 03:02:35 字數 2477 閱讀 7296

div居中的經典方法

1. 實現div水平居中

設定div的寬高,使用margin設定邊距0 auto,css自動算出左右邊距,使得div居中。

2. 實現div水平、垂直居中

要讓div水平和垂直居中,必需知道該div得寬度和高度,然後設定位置為絕對位置,距離頁面視窗左邊框和上邊框的距離設定為50%,這個50%就是指頁面視窗的寬度和高度的50%,最後將該div分別左移和上移,左移和上移的大小就是該div寬度和高度的一半。

3. 文字在div中水平、垂直居中(text-alignline-height)

1)text-align 屬性規定(塊級)元素內文字的水平對齊方式。

2)line-height = height,行高等於元素高度,用來實現垂直居中。

水平居中方案:

水平居中設定

1、行內元素

設定 text-align:center

2、定寬塊狀元素

設定 左右 margin 值為 auto

3、不定寬塊狀元素

a:在元素外加入 table 標籤(完整的,包括 table、tbody、tr、td),該元素寫在 td 內,然後設定 margin 的值為 auto

b:給該元素設定 displa:inine 方法

c:父元素設定 position:relative 和 left:50%,子元素設定 position:relative 和 left:50%

垂直居中設定

1、父元素高度確定的單行文字

設定 height = line-height

2、父元素高度確定的多行文字

a:插入 table (插入方法和水平居中一樣),然後設定 vertical-align:middle

b:先設定 display:table-cell 再設定 vertical-align:middle

在前端面試中,大都會問你div居中的方法:

今天我們就細數一下幾種方法:

1,使用position:absolute,設定left、top、margin-left、margin-top的屬性

.one

這種方法基本瀏覽器都能夠相容,不足之處就是需要固定寬高。

2,使用position:fixed,同樣設定left、top、margin-left、margin-top的屬性

.two

大家都知道的position:fixed,ie是不支援這個屬性的

3,利用position:fixed屬性,margin:auto這個必須不要忘記了。

.three

4,利用position:absolute屬性,設定top/bottom/right/left

.four

5,利用display:table-cell屬性使內容垂直居中

.five

6,最簡單的一種使行內元素居中的方法,使用line-height屬性

.six

這種方法也很實用,比如使文字垂直居中對齊

7,使用css3的display:-webkit-box屬性,再設定-webkit-box-pack:center/-webkit-box-align:center

.seven

8,使用css3的新屬性transform:translate(x,y)屬性

.eight

這個方法可以不需要設定固定的寬高,在移動端用的會比較多,在移動端css3相容的比較好

9、最高大上的一種,使用:before元素

.nine

.nine:before

.nine .content

更多專業前端知識,請上

【猿2048】www.mk2048.com

用 CSS 實現元素垂直居中,有哪些好的方案?

1.不知道自己高度和父容器高度的情況下,利用絕對定位只需要以下三行 parentelement childelement 2.若父容器下只有乙個元素,且父元素設定了高度,則只需要使用相對定位即可 parentelement childelement demo edit fiddle jsfiddle...

CSS中有哪些方法可以實現垂直居中?

幾種常用到的垂直居中方法 行內元素 單行 行內元素 1.一般用line height來實現垂直居中,用text ailgn實現水平居中 多行 行內元素 1.用 的vertical align來實現垂直居中 2.用flex彈性布局 塊級元素 1.通過padding實現垂直居中 2.flex布局實現垂直...

CSS中有哪些方法可以實現垂直居中(一)?

這裡是修真院前端小課堂,每篇分享文從 本篇分享的是 css中有哪些方法可以實現垂直居中?1 背景介紹 在前端開發過程中,對頁面進行布局時,除了css水平居中的需求外,還會經常遇到css垂直居中的需求,css垂直居中跟css水平居中一樣都是前端工程師的基本功。2 知識剖析 幾種常用到的垂直居中方法 1...