Question

如何只使用CSS将div放在垂直和水平浏览器的中心？

确保它也适用于IE7。

如果一切都失败了，我们可能会使用JavaScript，但最后一个选择。

Answer 1

HTML：

<div id="something">... content ...</div>

CSS：

#something {
    position: absolute;
    height: 200px;
    width: 400px;
    margin: -100px 0 0 -200px;
    top: 50%;
    left: 50%;
}

Answer 2

最简单的解决方案就是使用自动边距，并给你的div一个固定的宽度和高度。这适用于IE7，FF，Opera，Safari和Chrome：

HTML：

<body>
  <div class="centered">...</div>
</body>

CSS：

body { width: 100%; height: 100%; margin: 0px; padding: 0px; }

.centered
{
    margin: auto;
    width: 400px;
    height: 200px;
}

EDIT !!对不起，我刚刚注意到你在垂直方向说...顶部和底部的默认“自动”边距是零...所以这只会水平居中。垂直和水平定位的唯一解决方案是使用负边距进行捣乱，如接受的答案。

Answer 3

margin: auto;

Answer 4

试试这个

#center_div
{
       margin: auto;
       position: absolute;
       top: 0; 
       left: 0;
       bottom: 0; 
       right: 0;
 }

Answer 5

您还可以使用以下内容设置div：

#something {width: 400px; margin: auto;}

使用该设置，div将具有设置的宽度，并且边距和任一侧将根据浏览器的大小自动设置。

Answer 6

使用此：

center-div { margin: auto; position: absolute; top: 50%; left: 50%; bottom: 0; right: 0; transform: translate(-50% -50%); }

Answer 7

<html>
<head>
<style>
*
{
    margin:0;
    padding:0;
}

html, body
{
    height:100%;
}

#distance
{
    width:1px;
    height:50%;
    margin-bottom:-300px;
    float:left;
}


#something
{
    position:relative;
    margin:0 auto;
    text-align:left;
    clear:left;
    width:800px;
    min-height:600px;
    height:auto;
    border: solid 1px #993333;
    z-index: 0;
}

/* for Internet Explorer */
* html #something{
height: 600px;
}
</style>

</head>
<body>

<div id="distance"></div>

<div id="something">
</div>
</body>

</html>

经过测试，在FF2-3，IE6-7，Opera中运行良好！

Answer 8

.center {
  margin: auto;
  margin-top: 15vh;
}

应该做的伎俩

Answer 9

 <center>
        <h3 > your div goes here!</h3>    
    </center>

Answer 10

对于较旧的浏览器，您需要在HTML doc

之上添加此行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

如何使用CSS将div放在浏览器的中心？

10 个答案: