Question

当我使用top：50％并且离开：50％

盒子不是直接在中心。当然，当盒子非常小时，它似乎是居中的。但是当盒子有点大时，它看起来好像没有居中。

我该如何解决这个问题？

Answer 1

top和left对应于您框中的左上角。你要做的是让它们与中心相对应。因此，如果您将margin-top和margin-left分别设置为高度和宽度的一半，您将获得一个居中的框。

300x200盒子的示例：

width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;

Answer 2

水平：使用固定宽度和

margin-left: auto;
margin-right: auto;

垂直：那并不容易。你可以用

display: table-cell

为周围的DIV然后给它一个

vertical-align: middle

Answer 3

您可以为框指定固定的宽度和高度，然后将它的margin-top和margin-left属性赋予高度和宽度的负半部。

编辑：示例

div.centered {
    width: 500px;
    height: 400px;
    top: 50%;
    left: 50%;
    position: absolute;
    margin-top: -200px;
    margin-left: -250px;
}

Answer 4

使用translate将完美实现这一目标。只需应用此

div.centered {
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

source

Answer 5

非常奇怪的CSS“语言”并没有提供一种简单的方法来将元素置于屏幕中心。必须制作Kludges！这是我在高度和宽度都是AUTO的元素的唯一解决方案。试用FF19（Win + Mac），CH25（Win + Mac）和IE9。

.overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:#eee; /* aesthetics as you wish */
}
.overlay .vref { /* it is a vertical reference to make vertical-align works */
    display:inline-block;
    vertical-align:middle; /* this makes the magic */
    width:1px;
    height:100%;
    overflow:hidden;
}
.overlay .message {
    display:inline-block;
    padding:10px;
    border:2px solid #f00; /* aesthetics as you wish */
    background-color:#ddd; /* aesthetics as you wish */
    vertical-align:middle; /* this makes the magic */
    max-width:100%; /* prevent long phrases break the v-alignment */
}


<div class="overlay">
    <div class="vref">&nbsp;</div>
    <div class="message">whatever you want goes here</div>
    <div class="vref">&nbsp;</div>
</div>

Answer 6

一种方法是为盒子指定一个特定的宽度，然后将每个（左侧和右侧）的剩余距离减半。如果使用百分比而不是像素宽度（例如，

），这可能会更容易

<div style="margin-left:25%; margin-right:25%">...</div>

这为div框留下了50％的宽度。

Answer 7

body { text-align: center; }

#box {
  width: 500px; /* or whatever your width is */
  margin: 10px auto;
  text-align: left;
}

上面会将您的框中心水平放置在页面中央，顶部和底部有10px的边距（显然，顶部/底部边距可以更改为您想要的任何内容）。 IE上需要正文上的“text-align”，否则通常不会引起它的影响。然后，您需要在框中使用左对齐文本（除非您希望文本也在中心位置）以抵消正文上的文本对齐中心。

尽管使用纯CSS，尝试垂直居中几乎是不可能的。虽然CSS中有垂直对齐，但它不像表中的HTML垂直对齐那样工作，因此在CSS 2中没有像HTML那样的内置垂直对齐。问题是你正处理一个未知的高度 - 即使你知道你的盒子的高度，页面的高度是未知的，或者你想要在中心修复盒子是什么？这页纸？视口？每个人的可见屏幕区域都会有所不同，具体取决于他们的屏幕分辨率，浏览器以及所有浏览器对高度的不同解释。

有各种方法声称已经解决了这个问题，但通常它们并不能在所有浏览器中可靠地工作。我前几天发现this one，这似乎并不坏，但它在谷歌浏览器中不起作用（适用于Firefox和Opera，但我没有机会查看IE）。虽然在网站管理员世界的this thread上总结了各种方法及其优缺点，但对这个问题进行了有趣的讨论，值得一看。

编辑：只要您（或网站的访问者）不增加字体大小或行高，Dav在第一个响应中的解决方案就可以正常工作。容器将居中，但只要字体大小增加或添加更多内容，它就会溢出容器。

css：如何将box div元素直接置于中心？

7 个答案: