Question

我想在页面中间右侧居中一个div，我尝试top:30%，但是当窗口调整到对齐时。

<div id=cent></div>

由于让

Answer 1

如果您知道该div的高度/宽度（例如，它将是100px X 200px），那么您可以这样做：

#cent {
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-50px; /* this is half the height of your div*/  
  margin-left:-100px; /*this is half of width of your div*/
}

更新：另一种选择：见http://www.w3.org/Style/Examples/007/center（垂直居中）

Answer 2

为naivists的链接添加笔记（到w3c提示网站）： display:table-cell不适用于height:100%。因此，如果您想在页面上垂直居中一个您不知道其高度的元素，则需要将其放在一个包含display:table和height:100%的容器中，另一个容器放在{ {1}}和display:table-cell。

此外，如果要将其水平居中，则需要将vertical-align:middle指定为body，外部容器，并将width:100%指定给内部容器。内容应为text-align:center，并重置对齐display:inline-block。

最终，它变成如下：

text-align:left

我无法保证它可以在旧版浏览器（IE6 / 7）上运行。它可以在IE8上运行，前提是它运行在IE8标准上（是的，这会让你大吃一惊。谢谢，MS！），你必须给<style> #vcontainer { display: table; height: 100%; width: 100%; } #hcontainer { display: table-cell; vertical-align: middle; text-align: center; } #content { display: inline-block; border: lightGray 1px solid; background-color: lightBlue; text-align: left; } </style> <body> <div id="vcontainer"><div id="hcontainer"> <div id="content"> Hoyjo!<br> I have returned to my hometown!<br> Lolololo lololo lololo lololo lololo!<br> </div> </div></div> </body>和<html> <body>。

Answer 3

HTML：

<div id="box"></div>

CSS：

#box{
background-color: green;
width:100px;
height:100px;
margin:auto; /*you only need this part to center*/
}

在id“box”周围的引号或双引号中，你需要它们。

Answer 4

我知道这个问题已有9年历史了，但是9年后偶然发现了这个问题，也许其他人也可以这样做。

这是我的工作解决方案：

#cent {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

通过这样做，会将width和height设置为500px，然后将top，left，right和{{1 }}约束为0，最后，通过将边距设置为bottom，该框将放置在窗口的正中间。这也会有所响应。

Answer 5

 <div id="content"
                 style="text-align: center;
                 vertical-align: middle;
                 border-color: #000000;
                 border-width: 1px;
                 border-style: solid;
                 margin-top: 25%;
                 margin-bottom: 25%;">
                hi
            </div>

这对我有用......

编辑：这将对齐整个div ...无论div或页面的大小...假设这个id是整个页面中唯一的div ...

Answer 6

如果你想要顶部中间：
HTML：

collecstatic

CSS：

<div class="cent">
  <!-- code -->
</div>

如果您想要直接中间，请使用相同的HTML，但将CSS更改为：

.cent {
  align: center;
}

示例代码：jsfiddle.net/Lzdvnk29（如果你是的话，它可能看起来不居中看看它，但如果它是一个完整的HTML页面，它将显示在直接中间）

Answer 7

我知道这个问题已经很老了，但是我偶然发现了这个问题，以后我可能会再次寻找它。

就我而言，内容的高度可变，我不想使用绝对定位，因此我改用了flexbox容器。您只需要使用以下样式将内容包装在div中即可：

.container {
  min-height: 100vh; /* minimum height = screen height */
  display: flex;
  justify-content: center;
  align-items: center;
}

示例：https://codepen.io/alephao/pen/mdPRYqZ

Answer 8

以下是：

#cent
{
    margin-left:50px;
    margin-right:50px;
}

现在你的div将从左右开始50px，并以你所拥有的任何容器为中心。

Answer 9

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

使用css将页面中间的div框居中

9 个答案: