如何使用 CSS 在父元素中垂直居中 < div > ？

我试图做一个小的用户名和密码输入框。

我想问一下，如何使一个 div 垂直排列？

我有的是:

<div id="Login" class="BlackStrip floatright">
<div id="Username" class="floatleft">Username<br>Password</div>
<div id="Form" class="floatleft">
<form action="" method="post">
<input type="text" border="0"><br>
<input type="password" border="0">
</form>
</div>
</div>

如何使用 id Username 和 Form 使 div 垂直对齐到中心？我试着写:

vertical-align: middle;

在 CSS 的 div 与 id 登录，但它似乎不工作。任何帮助将不胜感激。

430668 次浏览
小开
最佳答案

现代浏览器中最好的方法是使用 flebox:

#Login {
display: flex;
align-items: center;
}

有些浏览器需要厂商前缀。对于那些没有 Flexbox 支持的老浏览器(比如 IE9或者更低版本) ，你需要使用一个 老方法来实现一个备用解决方案。

推荐阅读

小开

Div 不能以这种方式垂直对齐，但是可以使用页边距或位置: 相对来修改它的位置。

小开

如果你知道高度，你可以使用负 margin-top的绝对定位，如下所示:

#Login {
width:400px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-left:-200px; /* width / -2 */
margin-top:-200px; /* height / -2 */
}

否则，就没有真正的办法只用 CSS 来垂直居中一个 div

小开

如果您使用固定高度 div，那么您可以根据您的设计需要使用填充顶部。 或者你可以使用 top: 50% 。如果我们使用 div 比垂直对齐不工作，所以我们使用填充顶部或位置根据需要。

小开

我发现这个网站很有用: < a href = “ http://www.vanseodesign. com/css/竖直中心/”rel = “ nofollow”> http://www.vanseodesign.com/css/vertical-centering/ 这对我很有效:

超文本标示语言

<div id="parent">
<div id="child">Content here</div>
</div>

CSS

#parent {
padding: 5% 0;
}


#child {
padding: 10% 0;
}
小开

您可以在另一个 div 中垂直对齐一个 div。请参阅 JSFiddle 上的这个例子或考虑下面的示例。

超文本标示语言

<div class="outerDiv">
<div class="innerDiv"> My Vertical Div </div>
</div>

CSS

.outerDiv {
display: inline-flex;  // <-- This is responsible for vertical alignment
height: 400px;
background-color: red;
color: white;
}


.innerDiv {
margin: auto 5px;   // <-- This is responsible for vertical alignment
background-color: green;
}

.innerDiv的边距必须采用以下格式: margin: auto *px;

[其中，*是您期望的值。]

支持 HTML5的最新(更新/当前版本)浏览器支持 display: inline-flex。

这种 Internet Explorer 可能行不通:

始终尝试为任何垂直对齐的 div (即 innerDiv)定义一个高度，以解决兼容性问题。

小开

垂直对齐一直都很棘手。

这里我已经介绍了一些垂直对齐 div 的方法。

Http://jsfiddle.net/3puhe/

HTML:

<div style="display:flex;">


<div class="container table">
<div class="tableCell">
<div class="content"><em>Table</em> method</div>
</div>
</div>


<div class="container flex">
<div class="content new"><em>Flex</em> method<br></div>
</div>


<div class="container relative">
<div class="content"><em>Position</em> method</div>
</div>


<div class="container margin">
<div class="content"><em>Margin</em> method</div>
</div>


</div>

CSS:

em{font-style: normal;font-weight: bold;}
.container {
width:200px;height:200px;background:#ccc;
margin: 5px; text-align: center;
}
.content{
width:100px; height: 100px;background:#37a;margin:auto;color: #fff;
}
.table{display: table;}
.table > div{display: table-cell;height: 100%;width: 100%;vertical-align: middle;}
.flex{display: flex;}
.relative{position: relative;}
.relative > div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.margin > div {position:relative; margin-top: 50%;top: -50px;}
小开

Http://jsfiddle.net/dvl512e7/

除非对齐的 div 具有固定的高度，否则尝试对对齐的 div 使用以下 CSS:

{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: table;
}
小开

我找到了一个适合我的方法。下一个脚本插入一个不可见的图像(与 bgcolor 或透明 gif 相同) ，其高度等于屏幕上空白大小的一半。效果是完美的垂直排列。

假设您有一个头部 div (height = 100)和一个脚部 div (height = 50) ，并且您希望对齐的主 div 中的内容的高度为300:

<script type="text/javascript" charset="utf-8">
var screen = window.innerHeight;
var content = 150 + 300;
var imgheight = ( screen - content) / 2 ;
document.write("<img src='empty.jpg' height='" + imgheight + "'>");
</script>

将脚本放在要对齐的内容之前！

In my case the content I liked to align was an image (width=95%) with an aspect ratio of 100:85 (width:height).Meaning the height of the image is 85% of it's width. And the Width being 95% of the screenwidth.

因此，我使用:

var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth ));

将此脚本与

<body onResize="window.location.href = window.location.href;">

而且你有一个平滑的垂直线。

希望这对你也有用！

小开

这可以通过3行 CSS 来完成，并且与 IE9兼容:

.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}

例子: http://jsfiddle.net/cas07zq8/

信用卡

小开

@ G áborNagy 关于 另一个帖子的评论是我能找到的最简单的解决方案，对我来说非常有效，因为他带来了一个 jsfiddle，我在这里复制了一个小小的附加:

CSS:

#wrapper {
display: table;
height: 150px;
width: 800px;
border: 1px solid red;
}


#cell {
display: table-cell;
vertical-align: middle;
}

HTML:

<div id="wrapper">
<div id="cell">
<div class="content">
Content goes here
</div>
</div>
</div>

如果你还想水平对齐它，你必须在“ cell”div 中添加另一个 div“ inner-cell”，并赋予它这样的样式:

#inner-cell{
width: 250px;
display: block;
margin: 0 auto;
}
小开

我来晚了，但这是我自己想出来的这是我最喜欢的垂直对齐快速技巧之一。非常简单，而且很容易理解发生了什么。

您可以使用 :before css 属性将一个 div 插入到父 div 的开头，赋予它 display:inline-block和 vertical-align:middle，然后将这些相同的属性赋予子 div。因为 vertical-align用于沿着一条线对齐，所以那些内联 div 将被视为一条线。

将 :before div 设置为 height:100%，子 div 将自动跟随并在一条非常高的“直线”的中间对齐

.parent:before, .child {
display:inline-block;
vertical-align:middle;
}
.parent:before {
content:""; // so that it shows up
height:100%; // so it takes up the full height
}

这里有一个小提琴来演示我所说的内容。子 div 可以是任意高度，您永远不必修改它的边距/填充。
还有 还有一个更好的解释。

如果你不喜欢 :before，你可以手动输入一个 div。

<div class="parent">
<div class="before"></div>
<div class="child">
content
</div>
</div>

然后把 .parent:before重新分配到 .parent .before

小开

你试过这个吗？

.parentdiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
height: 300px; // at least you have to specify height
}

希望这能帮上忙

小开

在我的 Firefox 和 chrome 工作中:

CSS:

display: flex;
justify-content: center;     // vertical align
align-items: center;         // horizontal align
小开

我需要指定最小高度

#login
display: flex
align-items: center
justify-content: center
min-height: 16em
小开

将子元素放在 div 中居中

#parent {
background-color: red;
height: 160px;
  

display: flex;
  

/*vertical-align */
align-items: center;
  

/*horizontal align*/
justify-content: center;
}
    

#child {
background-color: orange;
height: 20px;
padding: 10px;
}
<div id="parent">
<div id="child">Content here</div>
</div>

小开

将 div 元素居中的最简单方法是使用具有以下属性的此类。

.light {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}

提交答案