對於確定寬高的元素
簡單的來說
我們用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還有flex的方法,父元素設定一下:.green
.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,一種常用的做法...