0

我有一个登录页面，它在水平和垂直方向上都绝对居中。里面有 2 个 div，较小的粉色 1 个和较大的蓝色 1 个。我怎样才能使较大的居中？

.container {
    background: rgba(249, 249, 249, 1);
    bottom: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 0px 4px 0 rgba(0, 0, 0, 1);
    height: 342px;
    height: max-content;
    left: 0;
    margin: auto;
    padding: 60px 30px 60px 30px;
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    overflow: visible;

}
.smaller {
    background: pink;
}
button {
    background: linear-gradient(rgba(239, 83, 80, 1), rgba(179, 47, 47, 1));
    border: 0;
    color: rgba(255, 255, 255, 1);
    margin: 10px;
    padding: 8px 70px 8px 20px;
    box-sizing: content-box;
    width: 50px;
}
.bigger {
    width: 400px;
    text-align: center;
    background: blue
}
<div class="container">
  <div class="smaller pink">
    <h2>Sign In</h2>
    <input>
  </div>
  <div class="bigger blue">
    <button>Back</button><button>Login</button>
  </div>
</div>

4

4 回答 4

1 

.container {
    background: rgba(249, 249, 249, 1);
    bottom: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 0px 4px 0 rgba(0, 0, 0, 1);
    height: 342px;
    height: max-content;
    left: 0;
    margin: auto;
    padding: 60px 30px 60px 30px;
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    overflow: visible;

}
.smaller {
    background: pink;
}
button {
    background: linear-gradient(rgba(239, 83, 80, 1), rgba(179, 47, 47, 1));
    border: 0;
    color: rgba(255, 255, 255, 1);
    margin: 10px;
    padding: 8px 70px 8px 20px;
    box-sizing: content-box;
    width: 50px;
}
.bigger {

    width: 400px;
    text-align: center;
    background: blue;
    margin: auto;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;

}
<div class="container">
  <div class="smaller pink">
    <h2>Sign In</h2>
    <input>
  </div>
  <div class="bigger blue">
    <button>Back</button><button>Login</button>
  </div>
</div>

于 2018-10-04T13:21:35.493 回答
0

您可能需要考虑使用flexbox，它本质上也是响应式的。

.container {
    background: rgba(249, 249, 249, 1);
    bottom: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 0px 4px 0 rgba(0, 0, 0, 1);
    height: 342px;
    height: max-content;
    left: 0;
    margin: auto;
    padding: 60px 30px 60px 30px;
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    overflow: visible;

}
.smaller {
    background: pink;
}
button {
    background: linear-gradient(rgba(239, 83, 80, 1), rgba(179, 47, 47, 1));
    border: 0;
    color: rgba(255, 255, 255, 1);
    margin: 10px;
    padding: 8px 70px 8px 20px;
    box-sizing: content-box;
    width: 50px;
}
.bigger {
    display: flex;
    background: blue;
    justify-content: space-around;
}
<div class="container">
  <div class="smaller pink">
    <h2>Sign In</h2>
    <input>
  </div>
  <div class="bigger blue">
    <button>Back</button><button>Login</button>
  </div>
</div>

于 2018-10-04T13:22:00.607 回答
0

只需将宽度设置为 100%

.container {
    background: rgba(249, 249, 249, 1);
    bottom: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 0px 4px 0 rgba(0, 0, 0, 1);
    height: 342px;
    height: max-content;
    left: 0;
    margin: auto;
    padding: 60px 30px 60px 30px;
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    overflow: visible;

}
.smaller {
    background: pink;
}
button {
    background: linear-gradient(rgba(239, 83, 80, 1), rgba(179, 47, 47, 1));
    border: 0;
    color: rgba(255, 255, 255, 1);
    margin: 10px;
    padding: 8px 70px 8px 20px;
    box-sizing: content-box;
    width: 50px;
}
.bigger {
    width: 100%;
    text-align: center;
    background: blue
}
<div class="container">
  <div class="smaller pink">
    <h2>Sign In</h2>
    <input>
  </div>
  <div class="bigger blue">
    <button>Back</button><button>Login</button>
  </div>
</div>

于 2018-10-04T13:19:18.593 回答
0

我想这会对你有所帮助

.container {
    background: rgba(249, 249, 249, 1);
    bottom: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 0px 4px 0 rgba(0, 0, 0, 1);
    height: 342px;
    height: max-content;
    left: 0;
    margin: auto;
    padding: 60px 30px 60px 30px;
    position: absolute;
    right: 0;
    top: 0;
    width: 450px;
    overflow: visible;

}
.smaller {
    background: pink;
    width: 300px;
    margin:auto;
}
button {
    background: linear-gradient(rgba(239, 83, 80, 1), rgba(179, 47, 47, 1));
    border: 0;
    color: rgba(255, 255, 255, 1);
    margin: 10px;
    padding: 8px 70px 8px 20px;
    box-sizing: content-box;
    width: 50px;
}
.bigger {
    width: 400px;
    text-align: center;
    background: blue;
    margin:auto;
}
<div class="container">
  <div class="smaller pink">
    <h2>Sign In</h2>
    <input>
  </div>
  <div class="bigger blue">
    <button>Back</button><button>Login</button>
  </div>
</div>

于 2018-10-04T13:19:54.303 回答