元素不確定寬高居中

2022-02-20 04:07:42 字數 896 閱讀 4453

對於確定寬高的元素

簡單的來說

我們用margin就可以了

比如上圖:

紅色框寬高分別是600*300

綠色框寬高分別是400*200

那麼,我們可以給綠色的框設定margin:50px 100px;

上下50px 左右100px

.red

.green

或者使用定位:

紅色框是position:relative 相對起點定位

綠色框是position:absolute 相對於定位的父元素定位

.red

.green

另一種定位方式

.red

.green

又或者這樣定位

.red

.green

當然這些全都有乙個前提:寬高確定

如果不確定寬高的情況下,我們可以通過css3來定位居中

.red

.green

不論是寬或高還是寬高,有任意不確定,都可以這樣設定居中

還有就是講父元素設定

display:table;

子元素設定

display: table-cell;

vertical-align:middle;

text-align:center;

如下:

.red

.green

還有flex的方法,父元素設定一下:

.red
裡面的內容就可以居中了

爾等可以試試哈

不確定元素寬度和高度時實現居中

一 在元素高度 寬度已知時,實現水平垂直居中就很簡單了 1 position all 二 當元素本身高度不確定時,margin left 50 是不行的,此時百分比不是元素本身的一半。也就是說如果百分比是相對自身就可以了,那我們可以使用css3的transform來代替margin 1 positi...

DIV不確定高度內部元素水平垂直居中的方法歸納

看題目就知道是利用父標籤的 display table cell,該屬性指讓標籤元素以 單元格的形式呈現,類似於td標籤。目前ie8 以及其他現代瀏覽器都是支援此屬性的。那麼既然父標籤已經是類似 單元了,那麼就可以利用 單元的屬性vertical align middle 來使得內部元素垂直居中了,...

不定寬元素水平居中

1.父層 改變display為inline型別 設定為 行內元素 顯示 然後子層 使用text align center來實現居中。存在問題 將塊元素的display設定為inline型別,少了一些功能,比如 設定長度值。2.塊級元素水平居中不能使用text align center,一種常用的做法...