<div>在页面上垂直和水平居中元素的最佳方法是什么？
我知道这margin-left: auto; margin-right: auto;将以水平为中心,但垂直做的最佳方式是什么？
我试图垂直居中我的标签内容,但是当我添加CSS样式时display:inline-flex,水平文本对齐消失.
如何为每个标签创建文本对齐x和y？
* { box-sizing: border-box; }
#leftFrame {
background-color: green;
position: absolute;
left: 0;
right: 60%;
top: 0;
bottom: 0;
}
#leftFrame #tabs {
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 25%;
}
#leftFrame #tabs div {
border: 2px solid black;
position: static;
float: left;
width: 50%;
height: 100%;
text-align: center;
display: inline-flex;
align-items: center;
}<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>这是源代码:
<div id = "outer">
<div id="top">
....
</div>
<div id="inner">
....
</div>
<div id="bottom">
....
</div>
</div>
我想知道如何制作div(内部),水平和垂直中心？我可以横向居中,但不能做垂直中心......谢谢.
我看到了很多关于如何将div居中到页面中间的示例,但在所有示例中,div的大小都是固定的.
如何将div放在div高度未知大小的页面中心？
(中间的灰色div)
我的代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
html,body{
margin: 0;
padding: 0;
border: 0;
}
body{
background-color: transparent;
overflow: hidden;
font-family: "Helvetica"
;
color: #359115;
font-weight:bold;
}
#wrapper {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
#container {
background-color: #dddddd;
/*height: 100%;
widows: 100%;*/
margin: 0,auto;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container" align="center">
<span class="currency">$ </span><span class="integer">4,080,048.</span><span class="decimal">00</span>
</div>
</div>
</body>
</html> …重要:
我的帖子(通常)不重复.我发现这个,这个,这个和这个堆栈溢出后(也有可能所有重复).我尝试这个帖子最常见的答案,但它不起作用.我也试过其他方法,但我无法达到目标.
所以,我有一个带文字的大div:
html, body {
height: 100%;
}
#dimScreen {
width: 100%;
height: 100%;
background:rgba(0,0,0,0.5);
}
h1 {
font-size:350%;
}<div id="dimScreen" style="text-align: center; vertical-align: center; display:inline-block;">
<h1 >Big text</h1>
</div>我的问题是,我无法想象如何将文本放在我的灰色div的中心(垂直+水平).如您所见,文本显示在div的中心(水平),但不在垂直中心.我在身体的一部分设置了中心(垂直+水平).
在我的示例中,我尝试将文本垂直对齐所有这些帖子的最常见响应,但它不起作用.我已经尝试过其他方式,我们可以在链接的问题中找到它们,但它们不起作用:我们总是有相同的结果.
我想我有这个问题,因为我在所有页面上显示我的(灰色)div.我尝试了一个普通的div并且代码有效:我的文本是垂直居中的.
简短的问题:
如何将文本垂直居中于灰色div？
如果您有疑问,请告诉我.
斯芬克斯.