已知和未知高度下進行垂直水平居中的方法

以下這篇文章跟大家介紹一下子盒子在父盒子內保持垂直水平居中的多種方案--已知子元素高度、未知子元素高度。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

（推薦教學：CSS影片教學）

一、方案一（已知子元素的寬高）

1.子元素開啟絕對定位，父元素開啟相對定位

2.子元素設定left、right、top、bottom屬性都為0，margin為auto 

#或    （注意2、3步二選一）

3.子元素left設為50%，top設為50%，margin-left設為-子元素的width/2px， margin-top設為-子元素的height/2px

#二、方案二（未知子元素寬高）

1 .子元素開啟絕對定位，父元素開啟相對定位（這一步驟和方案一相同）

2.子元素left設為50%，top設為50%，transform設為translate(-50% ,-50%)

特別說明：子元素開啟了絕對定位，隨之父元素也要開啟非static定位（relative相對定位或是absolute絕對定位都可以，根據需求），才能使子元素的絕對定位是相對於其父元素進行定位。

end，每種方案實作原理都不盡相同，望辯證待之。

更多程式相關知識，請造訪：程式設計影片！ ！

以上是已知和未知高度下進行垂直水平居中的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！