如果乙個元素具有固定或相對大小，要使其不管如何調整視窗大小或滾動頁面，始終位於瀏覽器視窗中間，可使用如下方法：
效果如圖：
那如何讓乙個元素相對於其父元素水平垂直居中呢？首先，要把元素的position屬性值改為absolute，使其有可能相對于父元素定位，而不是相對於瀏覽器視窗定位。absolute指定元素相對於position值不為static的第乙個祖先元素定位（如果找不到這樣的祖先元素，就相對於body），而static是元素position屬性的預設值，所以我們還要在父元素上做手腳。除了預設值static，position屬性主要的值還有absolute、fixed和relative。由於大多數時候，我們不想為了子元素的居中而改變父元素的位置或定位方式，所以排除absolute和fixed（當然這兩個值並不影響子元素的居中）。只剩下relative了，它指定元素相對於static定位方式確定的位置定位（使用left、right、top和bottom屬性）。如果將父元素的position屬性設為relative，但不改變定位屬性（left、top等），那麼就達到了既讓子元素相對於其定位，又不改變其預設布局方式的效果。舉例如下：
/*這是乙個用於演示父元素的預設定位未被影響，並且子元素確實是相對于父元素居中的干擾元素
*/#commondiv
style
>
head
>
<
body
>
<
div
id="commondiv"
>
div>
<
div
class
="parent"
>
<
div
class
="parent-center child"
>
div>
div>
body
>
html
>
效果如圖：
此外，還可以通過為父元素啟用彈性盒布局解決子元素水平垂直居中的問題：
效果如圖：
css中子元素相對于父元素定位
1 參照定位的元素必須是相對定位元素的前輩元素 相對參照元素進行定位 從上面 可以看出box1是box2的父元素 父元素當然也是前輩元素了 2 參照定位的元素必須加入position relative box13 定位元素加入position absolute，便可以使用top bottom lef...
父級fixed 相對于父元素的fixed定位的實現
問題描述 之前在專案中，遇到了乙個場景，需要實現相對于父元素的fixed定位 在父元素內拖動滾動條時，fixed 定位的元素不能滑動，在外層拖動滾動條時，父元素及父元素內的所有元素跟著一起滑動。但是position fixed是相對於視窗進行的定位，不能直接實現我們需要的效果。在網上搜尋看到乙個還不...
如何讓元素在父元素中水平或垂直居中
行內元素 text align center line height height 塊級元素 1.給父元素設定display flex 並且設定 align items centerjustify content center 2.給父元素乙個定位屬性，子元素使用絕對定位，並且使用配合屬性left ...