how to center bigger div under smaller div [duplicate] - html

Question

This question already has answers here:
center overflowing div inside smaller div
(1 answer)
Larger div centered inside smaller div
(3 answers)
How can I horizontally center an element?
(133 answers)
Closed 4 years ago.
I have a login page that is absolutely centered in the middle of the page both horizontally and vertically.
Inside there are 2 divs, smaller pink one and bigger blue one.
How can I center the bigger one?
.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

Just set width to 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

I think this will help you
.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

You may want to consider using flexbox which also is responsive by nature.
.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>