鍍金池/ 問(wèn)答/HTML/ css如何在父元素不定寬高子元素不定寬高的情況下讓子元素垂直居中?

css如何在父元素不定寬高子元素不定寬高的情況下讓子元素垂直居中?

網(wǎng)上看到的一些方法都是父元素定高,或者子元素定高的,都沒(méi)有兩者都不設(shè)置寬高達(dá)到效果的方法?

回答
編輯回答
鐧簞噯

也可以考慮將父元素設(shè)置為display: table-cell; text-align: center

2017年10月12日 15:48
編輯回答
汐顏

父元素設(shè)置text-align: center;,子元素設(shè)個(gè)上下padding,例如本頁(yè)面右上角的關(guān)注按鈕那行的libutton,關(guān)注按鈕button的文字是寫(xiě)的padding實(shí)現(xiàn)的垂直居中,li上面添加個(gè)text-align: center;,關(guān)注那塊按鈕包括文字就左右居中了,然后整體效果就上下左右居中了。

2017年7月28日 06:40
編輯回答
歆久
.father{
  position: relative;
}
.son{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

或者彈性布局,兼容性差點(diǎn)

.father{
  display: flex;
  justify-content: center;
  align-items: center;
}
2017年11月30日 22:51