Place an object on top of border, aligned to the center - html

Question

I basically want something like this:
The oval is a button called specific, its size depends on the text. The border belongs to a div called player. The button should always align to the center of the top border no matter what the sizes they are. Thanks.
#specific
{
display: inline-block;
padding: 5px 15px;
font-size: 15px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
border: none;
border-radius: 20px;
}
.player
{
width: 560px;
padding: 20px;
border-style: solid;
<?php echo $border.$border_color[0] ?>;
border-radius: 20px;
margin: 0;
text-align: center;
}
HTML code, if it is relevant:
<input type="button" id="specific" value="<?php echo $id; ?>" onclick='window.open("<?php echo $specific; ?>")'>
<div class="player">
<script type="text/javascript" src="<?php echo $url;?>"></script>
</div>

Answer 1

Put #specific inside the player div and position it absolutely.
Then it can be managed into place using position values and a transform.
body {
text-align: center;
}
#specific
{
display: inline-block;
padding: 5px 15px;
font-size: 15px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
border: none;
border-radius: 20px;
position: absolute;
top: 0;
left: 50%;
transform:translate(-50%, -50%);
background: lightblue;
border:inherit;
}
.player
{
width: 560px;
padding: 20px;
display: inline-block;
margin: 2em;
border-style: solid;
border-color:blue;
border-radius: 20px;
text-align: center;
position: relative;
}
<div class="player">
<div id="specific">Specific</div>
</div>

Answer 2

I would recommend to add position: relative to .player, and wrap your button with a div (let's call it .buttonWrap), which has the following css attached:
.buttonWrap {
position: absolute;
left: 0;
top: -20px; /* the number of pixels here should be calculated like (buttonHeight / 2) */
width: 100%;
text-align: center;
}

Answer 3

#specific
{
display: inline-block;
padding: 5px 15px;
font-size: 15px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
border: none;
border-radius: 20px;
}
.player
{
width: 560px;
padding: 20px;
margin: auto;
border-style: solid;
<?php echo $border.$border_color[0] ?>;
border-radius: 20px;
margin: 0;
text-align: center;
position: absolute;
}
.button{
width: 560px;
margin: auto;
text-align: center;
position: relative;
margin-bottom: -1em;
z-index: 10;
}
<div class="button">
<input type="button" id="specific" value="Play" onclick='window.open("<?php echo $specific; ?>")'>
</div>
<div class="player">
<script type="text/javascript" src="<?php echo $url;?>"></script>
</div>
here is the Demo

Answer 4

.container-lg {
border: 4px solid rgba(50, 150, 255, 1);
border-radius: 50px;
width: 400px;
height: 400px;
margin-top: 50px;
}
button.container-sm {
background-color: rgba(100, 175, 255, 1);
border: 2px solid rgba(50, 150, 255, 1);
border-radius: 40px;
width: 150px;
height: 40px;
display: block;
margin: auto;
margin-top: -22px;
}
<div class="container-lg">
<button class="container-sm"></button>
</div>