CSS flex centering to parent full width - html

Question

I'm trying to center two buttons within the center of their parent element. The problem is that the first element has content in the beginning and end, which causes flex to center to that, messing up the alignment of the whole.
#container {
background-color: green;
width: 100%;
}
#d1 {
height: 50px;
display: flex;
}
#d2 {
background-color: blue;
width: 50px;
height: 50px;
}
#d3 {
background-color: red;
}
<div id="container">
<div id="d1">
<p>This is some text</p>
<input type="button">
<div id="d2"></div>
</div>
<div id="d3">
<input type="button">
</div>
</div>

Answer 1

Add a display: flex property on #container
#container {
background-color: green;
width: 100%;
display:flex
}
#d1 {
height: 50px;
display: flex;
}
#d2 {
background-color: blue;
width: 50px;
height: 50px;
}
#d3 {
background-color: red;
}
<div id="container">
<div id="d1">
<p>This is some text</p>
<input type="button">
<div id="d2"></div>
</div>
<div id="d3">
<input type="button">
</div>
</div>

Answer 2

You need justify-content: center; along with display:flex; on parent div.
#container {
background-color: green;
width: 100%;
display: flex;
justify-content: center;
}
#d1 {
height: 50px;
display: flex;
}
#d2 {
background-color: blue;
width: 50px;
height: 50px;
display: flex;
}
#d3 {
background-color: red;
}
<div id="container">
<div id="d1">
<p>This is some text</p>
<input type="button">
<div id="d2"></div>
</div>
<div id="d3">
<input type="button">
</div>
</div>

Answer 3

I don't know how much this code will be help you. Just try to give it more better view so that you can control the alignment properly along with button height and width. Just hope it helps you.
#container {
background-color: green;
width: 100%;
display: flex;
}
#d1 {
width: 33.33%;
display: flex;
padding: 0 10px 0 10px
}
#d2 {
width: 33.33%;
display: flex;
padding: 0 10px 0 10px text-align:center;
}
#d3 {
width: 33.33%;
display: flex;
padding: 0 10px 0 10px
}
#d2>input {
background-color: blue;
width: 100%;
vertical-align: middle;
}
#d3>input {
background-color: red;
vertical-align: middle;
width: 100%;
padding: 0 10px 0 10px
}
<div id="container">
<div id="d1">
<p>This is some text</p>
</div>
<div id="d2"><input type="button"></div>
<div id="d3">
<input type="button">
</div>
</div>