前端知識學習 居中布局的多種實現方法

2021-08-15 13:04:18 字數 1973 閱讀 7117

01.inline-block + text-align

上**:

class="parent">

class="child">demo

.parent

.child

02.table + margin

上**:

class="parent">

class="child">demo

.parent

03.absolute + transform

上**:

class="parent">

class="child">demo

.parent

.child

04.flex + justify-content/margin

上**:

class="parent">

class="child">demo

.parent

或者:.parent

.child

以上方法實現效果:

01.table-cell + vertical-align 主要利用table-cell的單元格特性

上**:

class="parent">

class="child">demo

.parent

02.absolute + transform

上**:

class="parent">

class="child">demo

.parent

.child

03.flex + align-items

上**:

class="parent">

class="child">demo

.parent

以上**效果:

上**:

class="parent">

class="child">demo

.parent

.child

02.absolute + transform

上**:

class="parent">

class="child">demo

.parent

.child

03.flex + justify-content + align-items

上**:

class="parent">

class="child">demo

.parent

.child

以上**實現效果:

CSS 水平居中和垂直居中的多種實現方法

後面的所有例子,都分為 3 層巢狀 父元素,子元素,內容。其中父子元素都是塊級元素 div。父元素設定屬性display flex justify content center align items center 父元素設定屬性display flex 子元素設定屬性margin auto 父元素...

元素居中的多種方法 css布局技巧(1)

問題描述 給定兩個元素,這兩個元素是父子級關係。並且兩個元素的大小都是不確定的,那麼這時候如何讓子級在父級中上下左右都居中?暫且設定父級比子級要大一些 先上 及效果 思路 父級相對定位,子級絕對定位 而四個定位屬性的值都設定了0,那麼這時候如果子級沒有設定寬高,則會被拉開到和父級一樣寬高。而現在設定...

前端JS實現繼承的多種方式

定義乙個父類 function father name this.color red blue 原型方法 father.prototype.age 18 father.prototype.sayage function 1.原型鏈繼承 將父類的例項作為子類的原型 function son name ...