如何在较小的div下将较大的div居中

Question

我有一个登录页面，该页面在水平和垂直方向上绝对居中于页面中间。 里面有2个div，较小的粉红色一个和较大的蓝色一个。 我如何居中较大的一个？

.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>

Answer 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>

Answer 2

只需将宽度设置为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>

Answer 3

我认为这会对您有所帮助

.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>

Answer 4

您可能要考虑使用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>