子盒子在父盒子內保持垂直水平居中的多種方案--已知子元素高度、未知子元素高度

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

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

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

或者    （注意二、3步二選一）

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

 

 

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

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

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

 

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

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