在屏幕中央定位 < div > 元素

我想定位一个 <div>(或 <table>)元素在屏幕的中心，而不管屏幕大小。换句话说，“顶部”和“底部”的空间应该相等，“右边”和“左边”的空间应该相等。我想完成这个只有 CSS。

我尝试了以下方法，但没有效果:

 <body>
<div style="top:0px; border:1px solid red;">
<table border="1" align="center">
<tr height="100%">
<td height="100%" width="100%" valign="middle" align="center">
We are launching soon!
</td>
</tr>
</table>
</div>
</body>

注:
无论如何，如果 <div>元素(或 <table>)与网站滚动与否罚款。只是想在页面加载时居中显示。

593880 次浏览
小开
最佳答案

简单的方法，如果你有一个固定的宽度和高度:

#divElement{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}​

请不要使用内联样式! 下面是一个工作示例 http://jsfiddle.net/S5bKq/。

小开

如果你有一个固定的 div只是绝对位置它在50% 的顶部和50% 左边距和负边距顶部和左边距的一半高度和宽度分别。适应你的需要:

div {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 300px;
margin-left: -250px;
margin-top: -150px;
}
小开

设置宽度和高度，就可以了。

div {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
}

如果您希望元素维度是灵活的(并且不关心旧的浏览器) ，那么使用 XwipeoutX的答案。

小开

随着现在转换越来越普遍地得到支持，您可以在不知道弹出窗口的宽度/高度的情况下进行转换

.popup {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

简单! JSFiddle 在这里: http://jsfiddle.net/LgSZV/

更新: 查看 https://css-tricks.com/centering-css-complete-guide/获得一个相当详尽的 CSS 中心指南。加入这个答案，因为它似乎得到了很多眼球。

小开

试试这个:

width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;
小开

试试这个

<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
<tr>
<td>
<div style="text-align: left; display: inline-block;">
Your Html code Here
</div>
</td>
</tr>
</table>

或者这个

<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
<div style="display: table-row">
<div style="display: table-cell; vertical-align:middle;">
<div style="text-align: left; display: inline-block;">
Your Html code here
</div>
</div>
</div>
</div>
小开

现在，使用 HTML 5和 CSS 3更加容易:

<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;


display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div>
<div>TODO write content</div>
</div>
</body>
</html>
小开

如果有人想找到解决办法,

我找到了这个,

这是我找到的最好的解决方案！

div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

Http://dabblet.com/gist/2872671

希望你喜欢！

小开

另一种在中心显示块的简单灵活方法: 使用与 line-height和 text-align对齐的本机文本。

解决方案:

.parent {
line-height: 100vh;
text-align: center;
}


.child {
display: inline-block;
vertical-align: middle;
line-height: 100%;
}

和 html 示例:

<div class="parent">
<div class="child">My center block</div>
</div>

我们使 div.parent全屏，他的独生子女 div.child对齐的文本与 display: inline-block。

优点:

  • 灵活性，没有绝对价值观
  • 支架调整尺寸
  • 在手机上运行良好

关于 JSFiddle 的简单示例: https://jsfiddle.net/k9u6ma8g

小开

它适用于任何物体，即使你不知道它的大小:

.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
小开

我会在 CSS 中这样做:

div.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

然后在 HTML:

<div class="centered"></div>
小开

使用 弯曲更简单，不管你的 div大小都能正常工作:

.center-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
 <html>
<head>
</head>
<body>
<div class="center-screen">
I'm in the center
</div>
</body>
</html>

小开

不使用绝对位置的替代解决方案:
我看到很多位置绝对答案。我不能使用位置绝对不打破其他东西。因此，对于那些不能做到这一点的人，我是这样做的:
Https://stackoverflow.com/a/58622840/6546317(回应另一问题)。

解决方案只关注垂直居中，因为我的子元素已经水平居中了，但是如果不能以其他方式水平居中，也可以应用同样的方法。

小开

现在您可以使用代码行更少的 grid布局来完成这项工作。

.center-this{
display: grid;
place-items: center;
align-content: center;
}
<div class="center-this">
<div>
Hello
</div>
</div>


提交答案