html - 如何使我的登录 div 居中

标签 html css

我有一个登录页面，但在没有滚动条的情况下将登录框置于页眉和页脚之间时遇到问题。下面是我的网页

登录框似乎是 float 的，示例如下 web page floating login box

我想做的是将登录框置于页眉和页脚之间的中心，我不希望它是可滚动的。我的 css 代码和 html 在下面

@import url(https://fonts.googleapis.com/css?family=Roboto:300);

.login-page {
  width: 360px;
  padding: 8% 0 0;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #4CAF50;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
  background: #43A047;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #4CAF50;
  text-decoration: none;
}
.form .register-form {
  display: none;
}
.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.container:before, .container:after {
  content: "";
  display: block;
  clear: both;
}
.container .info {
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}
.container .info span a {
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
  color: #EF3B3A;
}
body {
  background: white; /* fallback for old browsers 
  background: -webkit-linear-gradient(right, #76b852, #8DC26F);
  background: -moz-linear-gradient(right, #76b852, #8DC26F);
  background: -o-linear-gradient(right, #76b852, #8DC26F);
  background: linear-gradient(to left, #76b852, #8DC26F);
  */
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
 
}

footer {
background-color: #FFF;
position:fixed;
bottom: 0px;
width: 100%;
text-align: center;
}


header {
background-color: #FFF;
position:fixed;
top: 0px;
width: 100%;
text-align: center;
}
<body>
    <header class="bgm-green m-b-30">
        <ul class="h-inner">
            <li class="hi-logo m-10" >
                <img id="logo-image" class="logo-image" src="img/logo.png" alt="Logo">
            </li>

            <li class="pull-right">
				 <h2 class="c-white m-r-15 f-300"></h2>
			</li>
           
    </header>

    <section id="content" class="bgm-white">
        <div >
            <div class="login-page">
                <div class="form">
                    <form class="login-form">
                        <div class="input-group m-b-20">
                            <span class="input-group-addon"><i class="zmdi zmdi-account"></i></span>
                            <div class="fg-line">
                                <input type="text" class="form-control" placeholder="Username">
                            </div>
                        </div>

                        <div class="input-group m-b-20">
                            <span class="input-group-addon"><i class="zmdi zmdi-lock"></i></span>
                            <div class="fg-line">
                                <input type="password" class="form-control" placeholder="Password">
                            </div>
                        </div>

                        <label class="checkbox">
                            <input id="checker" type="checkbox" value="">
                            <i class="input-helper"></i>
                            <span>Remember me</span>
                        </label>
                        <button>login</button>
                        <p class="message">Unable to login? Contact our admin <a href="#">here</a></p>
                    </form>
                </div>
            </div>
        </div>
    </section>


    <footer class="bgm-green">
        <div class="c-white">
            Copyright &copy; 2016 First High Tower Infotech
        </div>
    </footer>

    <!-- Older IE warning message -->
    <!--[if lt IE 9]>
            <div class="ie-warning">
                <h1 class="c-white">Warning!!</h1>
                <p>You are using an outdated version of Internet Explorer, please upgrade <br/>to any of the following web browsers to access this website.</p>
                <div class="iew-container">
                    <ul class="iew-download">
                        <li>
                            <a href="http://www.google.com/chrome/">
                                <img src="img/browsers/chrome.png" alt="">
                                <div>Chrome</div>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.mozilla.org/en-US/firefox/new/">
                                <img src="img/browsers/firefox.png" alt="">
                                <div>Firefox</div>
                            </a>
                        </li>
                        <li>
                            <a href="http://www.opera.com">
                                <img src="img/browsers/opera.png" alt="">
                                <div>Opera</div>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.apple.com/safari/">
                                <img src="img/browsers/safari.png" alt="">
                                <div>Safari</div>
                            </a>
                        </li>
                        <li>
                            <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">
                                <img src="img/browsers/ie.png" alt="">
                                <div>IE (New)</div>
                            </a>
                        </li>
                    </ul>
                </div>
                <p>Sorry for the inconvenience!</p>
            </div>
        <![endif]-->

    <!-- Javascript Libraries -->
    <!-- Placeholder for IE9 -->
    <!--[if IE 9 ]>
            <script src="vendors/bower_components/jquery-placeholder/jquery.placeholder.min.js"></script>
        <![endif]-->

    <script data-main="lib/js/config" src="lib/js/Requirejs.js"></script>

    <script>
		require(['config'], function(){
			require(['js/loaders/loginloader']);
		});
	</script>
</body>

最佳答案

在 .login-page 中添加 margin: 0 auto; 使其位于页面中央。

就像:

.login-page {
  margin: 0 auto;
}

或者看看下面的代码片段:

@import url(https://fonts.googleapis.com/css?family=Roboto:300);

.login-page {
  width: 360px;
  padding: 8% 0 0;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #4CAF50;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
  background: #43A047;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #4CAF50;
  text-decoration: none;
}
.form .register-form {
  display: none;
}
.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.container:before, .container:after {
  content: "";
  display: block;
  clear: both;
}
.container .info {
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}
.container .info span a {
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
  color: #EF3B3A;
}
body {
  background: white; /* fallback for old browsers 
  background: -webkit-linear-gradient(right, #76b852, #8DC26F);
  background: -moz-linear-gradient(right, #76b852, #8DC26F);
  background: -o-linear-gradient(right, #76b852, #8DC26F);
  background: linear-gradient(to left, #76b852, #8DC26F);
  */
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
 
}

footer {
background-color: #FFF;
position:fixed;
bottom: 0px;
width: 100%;
text-align: center;
}


header {
background-color: #FFF;
position:fixed;
top: 0px;
width: 100%;
text-align: center;
}

.login-page {
  margin: 0 auto;
}
<body>
<header class="bgm-green m-b-30">
    <ul class="h-inner">
        <li class="hi-logo m-10" >
            <img id="logo-image" class="logo-image" src="img/logo.png" alt="Logo">
        </li>

        <li class="pull-right">
             <h2 class="c-white m-r-15 f-300">Lagos State House of Assembly e-Parliament Management System</h2>
        </li>
    </ul>
</header>

<section id="content" class="bgm-white">
    <div >
        <div class="login-page">
            <div class="form">
                <form class="login-form">
                    <div class="input-group m-b-20">
                        <span class="input-group-addon"><i class="zmdi zmdi-account"></i></span>
                        <div class="fg-line">
                            <input type="text" class="form-control" placeholder="Username">
                        </div>
                    </div>

                    <div class="input-group m-b-20">
                        <span class="input-group-addon"><i class="zmdi zmdi-lock"></i></span>
                        <div class="fg-line">
                            <input type="password" class="form-control" placeholder="Password">
                        </div>
                    </div>

                    <label class="checkbox">
                        <input id="checker" type="checkbox" value="">
                        <i class="input-helper"></i>
                        <span>Remember me</span>
                    </label>
                    <button>login</button>
                    <p class="message">Unable to login? Contact our admin <a href="#">here</a></p>
                </form>
            </div>
        </div>
    </div>
</section>


<footer class="bgm-green">
    <div class="c-white">
        Copyright &copy; 2016 First High Tower Infotech
    </div>
</footer>

希望这对您有所帮助!

关于html - 如何使我的登录 div 居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40469775/

上一篇：html - 如何删除视差背景图像和下一个 div 之间的空白区域？

下一篇：javascript - 关闭功能无法正常工作

相关文章：

html - 带有图像的 Outlook HTML 电子邮件

html - 为什么图像离开了页面，而没有其他内容

html - 所有现代浏览器都支持自定义/任意 HTML 标签。有什么理由不使用它们吗？

JQuery Mobile - 内联显示 HTML 表单

javascript - 如何根据屏幕尺寸更改 slider 和表单高度

jquery - 父 div 类的 z-index 高于子类

html - 保持图像居中，同时保持 100% 高度并且只扩展/裁剪边

javascript - jQueryUI 动画(颜色)不起作用

html - 使用 :hover 调整/缩放图像

html - 子元素不响应绝对定位

©2024 IT工具网  联系我们