1

我有一个登录页面，我想将其水平和垂直居中。我已经编写了这段代码，但它不起作用。

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;
}
4

6 回答 6

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: #...语句都可以删除而不会产生任何后果。

于 2013-05-13T07:04:03.330 回答
1

使用这样的代码

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

演示链接

于 2013-05-13T07:10:49.123 回答
0

尝试以下操作：

.loginTable {
    top: 50%;
    left: 50%;
    position: absolute;
}
于 2013-05-13T06:43:14.013 回答
0

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

.loginMainDiv {
    height:550px;
    width: 40%;
    background: #fff;
    margin: 7% auto 0 auto;
}
于 2013-05-13T06:50:40.260 回答
0

通过 ;给父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;
}
于 2013-05-13T06:56:26.660 回答
0 
$(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 修复在任何屏幕的中心。如果您遇到任何问题，请告诉我

于 2013-05-13T07:28:30.860 回答