当页面大于屏幕时，如何在屏幕中间放置div

141

嗨，我正在使用类似于以下内容的方法来将div定位在屏幕中间：

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>


<div id="mydiv">Test Div</div>

但是，这样做的问题是它将项目放置在页面的中间而不是屏幕的中间。因此，如果页面高了几个屏幕，并且我在使div出现时位于页面的顶部（该部分的顶部显示在屏幕上），则它甚至不在屏幕上。您必须向下滚动才能查看。

有人可以告诉我您如何将其显示在屏幕中间吗？

— 编码器2
source

我只是在测试页上测试了该确切的代码，它使div完美地居中在页面上，甚至有大约100个<br />在尝试将其推下之前。也许尝试检查代码的其余部分，以查看是否存在覆盖DIV值的内容或导致DIV导致这些问题的内容。

— 伊莱

269

只需添加即可position:fixed，即使您向下滚动也可以看到它。在http://jsfiddle.net/XEUbc/1/上看到它

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

— 侯赛因
source

1

你是生命的救星。简单的解决办法效果很好，即使该元素转化应用规模..

— 温尼

91

我认为这是一个简单的解决方案：

<div style="
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: #f3f3f3;">Full Center ON Page
</div>

展开摘要

— 用户名
source

7

这种方法比批准的答案好得多

— Viacheslav Dobromyslov 2013年

2

喜欢这个，但是可以在“旧”浏览器中使用吗？

— 2014年

14

使用转换；

<style type="text/css">
    #mydiv {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

JavaScript解决方案：

var left = (screen.width / 2) - (530 / 2);
var top = (screen.height / 2) - (500 / 2);
var _url = 'PopupListRepair.aspx';
window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no");

— 埃尔多安
source

5

刚放 margin:auto;

#mydiv {
    margin:auto;
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

<div id="mydiv">Test Div</div>

5

试试这个。

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

— 尚丹·夏尔马
source

1

我认为这更有用，因为您无需将任何样式应用于父元素。

— canbax

3

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

这对我有用

— 亚伯拉罕
source

2

尽管从技术上讲这可能是正确的，但您想简要说明为什么这可以解决上下文问题

— drneel

2

简短的答案，只需添加即可position:fixed解决您的问题

— 帕斯
source

1

<html>
<head>
    <style type="text/css">

#mydiv {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100px;
    height:200px;
    margin:auto;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
    </style>
</head>
<body>
<div id="mydiv">Maitrey</div>
</body>
</html>

— 梅特里·马尔维
source

在采访中我问了这个问题“您如何对齐屏幕的div中心？”

— Maitrey Malve

1

好吧，下面是这个的工作示例。

如果您调整网页大小或加载任何大小，这将处理中心位置。

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

展开摘要

在上面的示例中，加载div将始终位于中心。

希望这对您有帮助:)

— 维卡什·潘迪（Vikash Pandey）
source

1

将标签放置在屏幕或其父标签中间的两种方法：

使用职位：

将父标签设置position为relative（如果目标标签具有父标签），然后设置目标标签样式，如下所示：

#center {
  ...  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用flex：

父标记样式应如下所示：

#parent-tag {
  display: flex;
  align-items: center;
  justify-content: center;
}

— 亚历克斯·乔利格
source

0

在您的脚本页面中...

    $('.a-middle').css('margin-top', function () {
        return ($(window).height() - $(this).height()) / 2
    });

在Div中使用中产阶级...

   <div class="a-middle">

— 安东尼·杰克
source

-1

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

展开摘要

— 兰明
source

-1

使用FLEX

display: flex;
height: 100%;
align-items: center;
justify-content: center;

— ASIR THERANS RAJA M
source

这会将内容居中放置在父元素或页面上，而不是屏幕上。

— 肖恩

-2

width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;

— 卢卡
source

添加一些解释

— Pankaj Makwana

-4

为此，您必须检测屏幕尺寸。CSS或HTML无法实现；您需要JavaScript。这是窗口属性https://developer.mozilla.org/en/DOM/window#Properties上的Mozilla开发人员中心条目

相应地检测可用的高度和位置。

— 斯科特·雷德克里夫
source