css實現子層在父層中水平垂直居中

2022-01-21 19:43:02 字數 985 閱讀 9229

例子:

>css實現子層在父層中水平垂直居中

title

>

<

style

type

="text/css"

>

#parent

#child

style

>

head

>

<

body

>

<

div

id="parent"

>

<

div

id="child"

>

div>

div>

body

>

html

>

解釋:id為parent的層的父層是body,id為child的層的父層是parent。

需要注意點:

一:子層必須設定position為absolute,父層必須設定position為relative;absolute可以作為另乙個absolute的父層。

二:子層top設定為50%,left也設定為50%。

三:子層的margin-top設定為本身高度的一半,並且為負值;margin-left設定為本身寬度的一半,並且為負值。

效果:子層水平垂直居中於父層。

如何實現子盒子在父盒子中水平垂直居中

效果如下 結構 1.方法一 採用彈性盒子 css father child 2.方法二 利用父盒子 table cell 子盒子 inline block css father child 3.方法三 定位 位移 css father child 4.方法四 定位 子盒子左邊距 上邊距的一半 css...

CSS實現父層透明,子層不透明

利用css中的opacity屬性可以實現一些視覺效果,但是父元素設定透明屬性會被子元素繼承,這是不想見到的,於是通過一些設定解決這個問題。filter alpha opacity 50 moz opacity 0.5 khtml opacity 0.5 opacity 0.5 解決辦法是利用css3...

用CSS實現層的垂直居中

在 曾經讓人迷糊的web相容問題回顧 一文中曾經提到一種方法,即 通過使用百分比絕對定位,與外補丁負值的方法,負值的大小為其自身寬度高度的一半 達到讓層垂直居中的效果。複製 div innerbox 這段css實現了層垂直居中於瀏覽器,如果要讓innerbox相對於乙個父級層實現垂直居中,只需設定父...