Question

嗨我正在使用类似于以下内容的东西来将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时，它甚至不在屏幕上。你必须向下滚动才能查看它。

有人可以告诉我你是如何让它出现在屏幕中间的吗？

Answer 1

只需添加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;
}

Answer 2

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

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

Answer 3

如果你知道元素的大小，你只需使用margin属性：

#mydiv {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px; //assuming that #mydiv has the height of 100px
  margin-left: -100px; //assuming that #mydiv has the width of 200px
}

注意 你应该使用元素宽度和高度的一半

但是如果你不确定它的大小，那就可以了：

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

Answer 4

使用转换;

<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");

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

Answer 6

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

这对我有用

Answer 7

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

Answer 8

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

Answer 9

#div {
    top: 50%;
    left: 50%;
    position:fixed;
}

只需将以上三个属性设置为任何元素，然后就可以了！

您的div正好在屏幕中心

Answer 10

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

使用职位：

将父标签<th>Date payment</th> <th>Number seance</th> <th>Price</th> <th>Total</th> <th>Name</th> </tr> </thead> @foreach($payments as $payment) <tr> <td> {{$payment->date_payment->format('d/m/Y') }}</td> <td> {{$payment->number_seance}}</td> <td> {{$payment->price}}</td> <td> {{$payment->total}}</td> <td> {{$payment->students->first()->name}}</td> <td>设置为position（如果目标标签具有父标签），然后设置目标标签样式，如下所示：

relative

使用flex：

父标记样式应如下所示：

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

Answer 11

嗯，下面是这方面的工作示例。

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

＆＃13;

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

＆＃13;

在上面的示例 loading div 将始终位于中心。

希望这会对您有所帮助：）

Answer 12

在你的脚本页面中......

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

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

   <div class="a-middle">

Answer 13

尝试这个。

begin

Answer 14

＆＃13;

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

＆＃13;

Answer 15

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

Answer 16

使用FLEX

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

Answer 17

我刚测试了测试页面上的确切代码，并且它将div完美地放在页面上，即使在大约100 <br /> 之前尝试将其推下来。

也许请尝试检查代码的其余部分，看看是否有某些事情要么覆盖DIV的值，要么影响DIV导致这些问题。

Answer 18

为此你必须检测屏幕尺寸。使用CSS或HTML无法做到这一点;你需要JavaScript。以下是窗口属性https://developer.mozilla.org/en/DOM/window#Properties

上的Mozilla开发人员中心条目

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

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

18 个答案:

使用职位：

使用flex：