Question

我有一个登录页面，我希望水平和垂直居中。我写了这段代码，但它没有用。

HTML：

 <div class='loginMainDiv'>
  <div class="loginTable">
  </div>
</div>

CSS：

.loginMainDiv {
    height:550px;
    width:100%;
    text-align:center;
}

.loginTable {
   display: block;
  margin-left: auto;
  margin-right: auto;
}

Answer 1

这是你可以做的一个例子：

http://jsfiddle.net/jUN83/

使用.loginTable的边距，直到符合您的要求。

使用的CSS：

.loginMainDiv {
    height: 550px;
    text-align:center;
    background: #FFDDDD; /* For clarity */
}
.loginTable {
    width: 75%;
    margin: 50% auto;
    background: #DDDDFF; /* For clarity */
}

可以删除background: #...个语句而不会产生任何后果。

Answer 2

使用像这样的代码

HTML

<body>
    <div id="loginMainDiv">
          <div id="loginTable">Content goes here</div>
    </div>

</body>

CSS

body, html, #loginMainDiv {
    width: 100%;
    height: 100%
}


#loginTable{  
        width: 200px;
        height: 200px;
        background-color: blue;    
        position:absolute;
        left:0; right:0;
        top:0; bottom:0;
        margin:auto;    
        max-width:100%;
        max-height:100%;
        overflow:auto;
}

demo link

Answer 3

尝试以下方法：

.loginTable {
    top: 50%;
    left: 50%;
    position: absolute;
}

Answer 4

试试这个。 7 percent从顶部开始。左右是自动，将使div中心对齐。您可以相应地设置宽度。

.loginMainDiv {
    height:550px;
    width: 40%;
    background: #fff;
    margin: 7% auto 0 auto;
}

Answer 5

通过display: table; 为父display: table-cell;和必须居中的元素vertical-align: middle提供垂直中心

示例：http://jsbin.com/epaxob/1/edit

.loginMainDiv {
    height: 550px;
    width: 100%;
    text-align: center;
    display: table;
    vertical-align: middle;
}

.loginTable {
    display: block;
    display: table-cell;
}

Answer 6

$(document).ready(function(){

  var windowWidth = $(window).width(); //retrieve current window width
  var windowHeight = $(window).height(); //retrieve current window height

  $('.loginTable').css('top',(windowHeight/2)+'px');
  $('.loginTable').css('left',(windowWidth /2)+'px');

});

此代码将始终将您的div修复到任何屏幕的中心.. 如果您遇到任何问题，请告诉我

将div水平和垂直居中，宽度为％

6 个答案: