Question

我试图在不使用保证金的情况下在页面中间找到一个方框。

我试过了 -

.box-middle
{
vertical-align:middle;
height:100px;
width:100px;
border:1px solid #ddd;

}

这根本不起作用 -

但设置保证金属性的事情有效，我不想使用margin。因为给予保证金可以打破响应式网页设计。

所以我有一个登录表单，并希望将其设置在页面中间。

请指导！

在这里你可以用这个方法做点什么 -

Please align me middle

Answer 1

使用以下jQuery代码：

  $(window).resize(function(){

  $('.className').css({
    position:'absolute',
    left: ($(window).width() - $('.className').outerWidth())/2,
    top: ($(window).height() - $('.className').outerHeight())/2
  });

  });

//最初运行函数：

 $(window).resize();

Answer 2

我已更新您的小提琴fiddle

.box-middle
 {
 text-align:center;
 margin: 50px auto;
 height:100px;
 width:100px;
 border:1px solid #ddd;
background:#98bf26;

 }

<div style="border:1px solid">
 <div class="box-middle"></div>
</div>

Answer 3

试试这个：

.box-middle
{
margin-top:-50px;/*half the box's height*/
    margin-left:-50px;/*half the box's width*/
height:100px;
width:100px;
border:1px solid #ddd;
    background:#98bf26;
position: absolute;
top: 50%; left: 50%;

}

http://jsfiddle.net/LTec3/1/

Answer 4

您可以使用绝对位置手动居中

这将使大小调整为20/60/20，并将根据用户窗口的一侧进行调整：

<DIV style="position:absolute; top:249px; left:20%; width:60%; height:700px;">

或

<DIV style="position:absolute; top:249px; left:435px; width:233px; height:700px;">

还有简单的中心标签：

<center>

如何在不使用边距的情况下对齐页面中间的框？

4 个答案: