Question

我创建了自己的灯箱，问题是它显示在我的显示器上，而不是更宽的显示器或更大的分辨率。

在所有分辨率/监视器/浏览器中居中div的最佳方法是什么？

Answer 1

尝试使用此

将父div样式设为中心，并将margin: 0 auto;用于子div

#parentDiv{
text-align: center;
}

#main{
margin:0 auto;
width:755px;
text-align: left;
}

<div id="parentDiv"><div id="main">Content</div></div>

Answer 2

水平，垂直还是两者都居中？如果你想要两者，this过去对我有用。否则，答案sathish posted适用于仅水平居中

Answer 3

#center {position:absolute; width:400px; height:400px; left:50%; top:50%; margin:-200px /must be half of the height/ 0 0 -200px; /must be half of the width/}

将div水平和垂直居中。关于其第一个父级的位置：relative;

Answer 4

如果您知道宽度：

<div></div>

div {
  left: 50%;
  margin-left: -50px; /* width / 2 */
  width: 100px;
}

Answer 5

如果您使用

将所有内容设置为居中

*{margin:0 auto;}

除非另有说明，否则它会将文档中的任何内容放在中心

或者您可以使用包装器div

div#wrapper {margin:0 auto;}

如果您使用旧浏览器，则应使用

div#wrapper {text-align:center;}

有30种方法可以做，有点取决于你在做什么......

这些是最容易的

Answer 6

在div上设置宽度，然后给它一个居中的类：

.center
{
margin:0 auto;
}

它将集中在任何浏览器中。

Answer 7

尽管上面的所有答案看起来都是正确的，但我自己也被困在了一下。这是我的简化方法。

我们假设您拥有以下代码，并希望将内容集中在div＆＃39; storyline-container＆＃39;。

<body>
    <div class="storyline-container">
        <script src=storyline.js type="text/javascript"></script>
    </div>
</body>

简单地编写下面的代码不会起作用，因为你还需要对父div进行居中对齐，在这种情况下，父div是＆＃39; body＆＃39;

.storyline-container 
{
    text-align: center;
}

在css文件中添加以下代码以解决您的问题。

body{
    text-align: center;
}

如何将Div划分为所有监视器/分辨率/浏览器？

7 个答案: