CSS實現三欄布局和垂直居中

2021-08-01 21:51:15 字數 1547 閱讀 4081

網上找的方法,自己整理一下~(這些面試也會考)

#三欄絕對布局

我是左邊

我是右邊

我是中間

html,body

#left,#right

#left

#right

#center

浮動(中間的要放在最後)

我是左邊

我是右邊

我是中間

html,body

#left,#right

#left

#right

#center

margin負值法(布局中間部分一定要放在前面,左右順序不限制。對於left快的margin負值一定要等於wrap的寬度。)

html,body

#wrap

#wrap #center

#left_margin,#right_margin

#left_margin

#right_margin

flex

html,body

#box

#left_box,#right_box

#center_box

#垂直居中

css2:

.parentnode

css3: ( flex )  ( 父元素設定為 absolute 和 flex還有另外兩個屬性需要設定,分別是justify-content和align-items,他們的意思分別是水平居中和垂直居中 )

* .parentnode

.childnode

css3: (transforrm)

.parentnode

首先定義為絕對定位

top: 50%;left: 50%; 是以父元素(positon不為static)的左上角為原點,將元素分別向右和向下移動父元素的寬和高的50%距離

translate(-50%,-50%) 作用是,往上(x軸),左(y軸)移動自身長寬的 50%,以使其居於中心位置

tips:

flex實現流式布局

*.container

.item

@media (min-width:960px)

}

如何實現兩欄布局,三欄布局,水平 垂直居中

先寫一下樣式 box left 左 right 右 使用float margin方式實現 還可以使用position實現 div left right 也可以使用flex實現 div box left right 先寫樣式 box left 左 right 右 center 中 使用float ma...

css垂直水平居中 三欄布局合集

loat margin 浮動布局 left right main body,html,containerl 左邊欄左浮動 left 中間欄自適應 main 右邊欄右浮動 right優點 快捷 簡單 相容性較好 缺點 有侷限性 脫離文件流 需要清除浮動等 2.position 絕對布局 left ma...

CSS實現垂直居中布局

首先將與的高度設定為100 為演示父元素不定寬高的效果 並清除的預設樣式。html,body垂直居中大致分為兩類,父元素定寬高與父元素不定寬高,將兩類樣式以及子容器設定好。set parent,dy parent child dy parent使用margin auto使水平居中,將子容器設定為re...