使用CSS在身體內垂直居中DIV

-2

我已經閱讀了至少5篇有關此問題的文章，以及文章like this and this。這一定是可能的！使用CSS在身體內垂直居中DIV

我在我的身體內有一個div，我想垂直居中在我的頁面上。就像這樣：

<body> 
    <div>I would like this to appear in the middle of the viewport.</div> 
</body>

第二條上面展示了其解決方案，但他們的例子是其他的div，它不適合你想要一個體內中心的DIV裏面工作的div。我曾嘗試在div中設置div，並將高度設置爲100％，但這隻會讓我的瀏覽器生氣。

請幫忙！我不想訴諸JQuery！

來源

2015-12-01 serlingpa

http://stackoverflow.com/questions/12771982/vertically-centering-a-div-in-body和http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-全部瀏覽器 –

謝謝@ Mohamed-Yous如果第一個人做了這個訣竅。可惜我無法將你的答案標記爲解決方案。 – serlingpa

我希望如此:) :) ..祝你好運:-) –

嘗試設置position到relative，text-align到center，使用cssvh單位45或50top，根據的height設置或div件line-height

div { 
 
    position:relative; 
 
    top:45vh; 
 
    text-align:center; 
 
}

<body> 
 
    <div>I would like this to appear in the middle of the viewport.</div> 
 
</body>

來源

2015-12-02 00:02:56 guest271314

如果你給DIV固定高度，那麼你可以使用絕對定位垂直居中。

div { 
    height:100px; 
    position:absolute; 
    top:50%; 
    margin-top:-50px; 
}

無論您的身高是多少，margin-top都應該是其中的一半。

您也可以垂直居中未指定高度的DIV，如果你把它包在另一個DIV像這樣：

<div id="outer"> 
    <div id="inner">Some text here...</div> 
</div> 

#outer { 
    height:100%; 
    display:table; 
} 
#inner { 
    display:table-cell; 
    vertical-align:middle; 
}

然而，顯示：表並顯示：表細胞具有較少的瀏覽器的支持。

來源

2015-12-02 00:04:49 Comptonburger

只需使用Flexbox的：

body { 
 
    display:flex; 
 
    height:100vh; 
 
    align-items:center; 
 
    justify-content:center; 
 
} 
 
div { 
 
    width:125px; 
 
    border:1px solid black; 
 
}

<body> 
 
    <div>I would like this to appear in the middle of the viewport.</div> 
 
</body>

如果您打算支持IE10你需要一些prefixing，對於IE9和下面你需要其他的解決方案。實際上今天說 - 除非客戶支付你不要，否則只要忽略IE10和更老。人們實際上升級這些日子。

來源

2015-12-02 00:04:53

將使用絕對定位的可能的解決方案之一：

html, body { 
 
    height: 100%; 
 
} 
 
.center { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<body> 
 
    <div class="center">I would like this to appear in the middle of the viewport.</div> 
 
</body>

或者使用此顯示：表

html, 
 
body { 
 
    height: 100%; 
 
} 
 
.container { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: table; 
 
} 
 
.wrapper { 
 
    display: table-cell; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 
}

<body> 
 
    <div class="container"> 
 
    <div class="wrapper"> 
 
     I would like this to appear in the middle of the viewport. 
 
    </div> 
 
    </div> 
 
</body>

來源

2015-12-02 00:06:28

有2層簡單的方法nowdays：柔性顯示選項（HTML &體之間3行代碼中）：

html { 
 
    min-height:100%; 
 
    display:flex; 
 
    } 
 
body { 
 
    margin:auto; 
 
    } 
 
/* show me where it stands */ 
 
html { 
 
    background:linear-gradient(to left, rgba(0,0,0,0.25) 50%, transparent 50%),linear-gradient(to top, rgba(0,0,0,0.25) 50%, transparent 50%); 
 
    } 
 
div { 
 
    border:solid; 
 
    }

<body> 
 
    <div>I would like this to appear in the middle of the viewport.</div> 
 
</body>

或臺式顯示器（IE8包括在這裏）：

html { 
 
    height:100%; 
 
    width:100%; 
 
    table-layout:fixed; /*if to avoy spreading over the 100% width */ 
 
    display:table; 
 
    } 
 
body {display:table-cell; 
 
    vertical-align:middle; 
 
    text-align:center; 
 
    } 
 
div { 
 
    display:inline-block; 
 
    } 
 
/* show me where it stands */ 
 
html { 
 
    background:linear-gradient(to left, rgba(0,0,0,0.25) 50%, transparent 50%),linear-gradient(to top, rgba(0,0,0,0.25) 50%, transparent 50%); 
 
    } 
 
div { 
 
    border:solid; 
 
    }

<body> 
 
    <div>I would like this to appear in the middle of the viewport.</div> 
 
</body>

來源

2015-12-02 00:17:51

@serlingpa如果你在你的身體必須是要垂直居中這一個格，那麼我的解決方案：http://jsfiddle.net/Rwthwyn/1bo7rx2q/

爲了使改造工作：

div { 
    position: fixed; 
    top: 50%; 
    transform: translateY(-50%); 
}

這可以在此的jsfiddle可以看出在某些瀏覽器的舊版本中，您需要添加前綴（-moz-，-ms-，-o-，-webkit-），例如：-webkit-transform：translateY（-50％）等。

來源

2015-12-02 00:36:26 SYPOMark

使用CSS在身體內垂直居中DIV

回答

相關問題