将 div 在 body 中垂直居中？

问题描述 投票：0回答：8

我尝试将其垂直居中于

body
（而不是水平居中）。另外，我不想指定高度或类似的东西。我尝试添加一个 100% 高度的包装纸和其他东西，但一无所获。你能帮我解决这个问题吗？

js在这里小提琴

 <form name="signup" class="signup" action="signup.php" style="border: 1px solid #000; ">
     <input type="text" placeholder="Email"/><br>
     <input type="text" placeholder="Username"/><br>
     <input type="password" placeholder="Password"/><br>
     <button type="submit">Next</button>
 </form>​
html css centering
8个回答
62
投票

请参阅 您的 jsFiddle 的编辑版本。

基本上，只需将内容包装在 

<div class = "main"><div class = "wrapper"></div></div>
中，然后添加以下 CSS：

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

如果您有可用的 Flexbox，则无需使用即可完成 

display: table;

代码示例：

html,
body {
  height: 100%;
  width: 100%;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}
<html>
  <body>
    <div class="container">
      <div class="content">
        This div will be centered
      </div>
    </div>
  </body>
</html>

哒哒！垂直和水平居中的内容 div。 JSFiddle：https://jsfiddle.net/z0g0htm5/。

主要取自https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/和https://css-tricks.com/snippets/css/a-guide-to-弹性盒/

11
投票

更新：codesandbox.io

form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	    
}
<form name="signup" class="signup" action="signup.php" style="border: 1px solid #000; ">
     <input type="text" placeholder="Email"/><br>
     <input type="text" placeholder="Username"/><br>
     <input type="password" placeholder="Password"/><br>
     <button type="submit">Next</button>
 </form>​

相关：将 div 置于 body 中心

1
投票

您确实可以在没有包装纸的情况下将单个容器垂直和水平居中。关键是要理解 100% 高度和宽度的含义。表示父元素的百分比。您必须将百分比向上链接到层次结构，直到达到实际的视口高度和宽度。

HTML 元素 <---> BODY 元素 <----> DIV 元素

DIV 中高度的 100% 会查找 BODY 的高度，而 BODY 又会查找 HTML 的高度，而 HTML 又会查找视口的大小。为了让它正常工作，你不能在CSS中组合HTML和BODY，而是分开处理它们。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
}

div {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
<html>
  <body>
    <div>
      Center me!
    </div>
  </body> 
</html>

0
投票

A JSFiddle 带有表格扭曲的示例

在上面的解决方案中，使用 

"height: 100%"
为 html 和 body 提供 css，然后将要围绕表格居中的表单包裹起来。

代码示例

<html>
<body>    
<table height="100%" width="100%" border="1">
    <tr>
    <td>
    <form name="signup" class="signup" action="signup.php" style="border: 1px solid #000; ">

                <input type="text" placeholder="Email"/><br>

                <input type="text" placeholder="Username"/><br>

                <input type="password" placeholder="Password"/><br>

                <button type="submit">Next</button>

            </form>
        </td>
        </tr>
</table>    
</body>
</html>

0
投票

这对我有用：

样式.css

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

我在这里找到了这个代码片段。

0
投票

使用现代 CSS，您可以通过制作容器网格并为其指定高度，将需要垂直居中的内容简单地包装在元素内。

如果您需要垂直和水平，您可以给内容一个宽度，或者让内容决定，然后在网格上使用

place-items:center;
。这是 
align-items:center; justify-items:center;

的快捷方式

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/place-items

body {
  display: grid;
  align-items: center;
  height: 100vh;
}

.signup {
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
}
<form name="signup" class="signup" action="signup.php">
  <input type="text" placeholder="Email" />
  <input type="text" placeholder="Username" />
  <input type="password" placeholder="Password" />
  <button type="submit">Next</button>
</form>

-5
投票

CSS： 宽度：200px； 边距 0 自动；

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.