首頁猿問在頁面上垂直和水平居中<di...

在頁面上垂直和水平居中<div>的最佳方法是什么？

JavaScript Html/CSS

縹緲止盈 2019-05-28 16:56:56

在頁面上垂直和水平居中<div>的最佳方法是什么？<div>在頁面上垂直和水平居中元素的最佳方法是什么？我知道這margin-left: auto; margin-right: auto;將以水平為中心，但垂直做的最佳方式是什么？

查看完整描述

3 回答

蝴蝶刀刀

TA貢獻(xiàn)1801條經(jīng)驗(yàn) 獲得超8個(gè)贊

雖然OP在提出這個(gè)問題時(shí)沒有用，但我認(rèn)為，至少對于現(xiàn)代瀏覽器來說，最好的解決方案是使用display：flex或pseudo class。

您可以在以下小提琴中看到一個(gè)示例。這是更新的小提琴。

對于偽類，一個(gè)例子可能是：

.centerPseudo {
    display:inline-block;
    text-align:center;}.centerPseudo::before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
    width:0px;}

display：flex的用法，根據(jù)css-tricks和MDN如下：

.centerFlex {
  align-items: center;
  display: flex;
  justify-content: center;}

還有其他可用于flex的屬性，這些屬性在上面提到的鏈接中進(jìn)行了解釋，并附有其他示例。

如果你必須支持不支持css3的舊瀏覽器，那么你應(yīng)該使用javascript或其他答案中顯示的固定寬度/高度解決方案。

反對回復(fù) 2019-05-28

3 回答
0 關(guān)注
532 瀏覽

關(guān)注

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

在頁面上垂直和水平居中<div>的最佳方法是什么？

在頁面上垂直和水平居中<div>的最佳方法是什么？

3 回答

相關(guān)問題推薦

添加回答

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

在頁面上垂直和水平居中<div>的最佳方法是什么？

在頁面上垂直和水平居中<div>的最佳方法是什么？

3 回答

相關(guān)問題推薦

添加回答

在頁面上垂直和水平居中<div>的最佳方法是什么？