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

时间：2021-10-29 17:23:38

How to put a div in center of browser both vertically and horizontally using CSS only?

如何仅使用CSS在纵向和横向上将div放在浏览器的中心？

Make sure it works on IE7 too.

确保它也适用于IE7。

If everything fails, we may use JavaScript, but a last choice.

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

9 个解决方案

#1

74  

HTML:

HTML：

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

CSS:

CSS：

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

#2

25  

The simplest solution is just to use an auto margin, and give your div a fixed width and height. This will work in IE7, FF, Opera, Safari, and Chrome:

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

HTML:

HTML：

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

CSS:

CSS：

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

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

EDIT!! Sorry, I just noticed you said vertically...the default "auto" margin for top and bottom is zero...so this will only center it horizontally. The only solution to position vertically and horizontally is to muck around with negative margins like the accepted answer.

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

#3

11  

margin: auto;

#4

6  

try this

尝试这个

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

#5

2  

Using this:

使用这个：

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

#6

1  

You can also set your div with the following:

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

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

With that setting, the div will have a set with, and the margin and either side will automatically set depending on the with of the browser.

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

#7

1  

<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>

Tested in FF2-3, IE6-7, Opera and works well!

经过FF2-3，IE6-7，Opera的测试，效果很好！

#8

0  

For Older browsers, you need to add this line on top of HTML doc

对于较旧的浏览器，您需要在HTML doc上添加此行

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

#9

0  

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

Should do the trick

应该做的伎俩

#1

74  

HTML:

HTML：

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

CSS:

CSS：

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

#2

25  

The simplest solution is just to use an auto margin, and give your div a fixed width and height. This will work in IE7, FF, Opera, Safari, and Chrome:

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

HTML:

HTML：

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

CSS:

CSS：

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

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

EDIT!! Sorry, I just noticed you said vertically...the default "auto" margin for top and bottom is zero...so this will only center it horizontally. The only solution to position vertically and horizontally is to muck around with negative margins like the accepted answer.

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

#3

11  

margin: auto;

#4

6  

try this

尝试这个

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

#5

2  

Using this:

使用这个：

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

#6

1  

You can also set your div with the following:

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

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

With that setting, the div will have a set with, and the margin and either side will automatically set depending on the with of the browser.

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

#7

1  

<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>

Tested in FF2-3, IE6-7, Opera and works well!

经过FF2-3，IE6-7，Opera的测试，效果很好！

#8

0  

For Older browsers, you need to add this line on top of HTML doc

对于较旧的浏览器，您需要在HTML doc上添加此行

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

#9

0  

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

Should do the trick

应该做的伎俩

标签：

相关文章