Button placement in the middle of the above container

hi guys! I am wondering how to place the button at 50% of the above container where it is always in the middle no matter the size of the page.

Universal Styles/
h2,
h4{
font-family: ‘Playfair Display’, serif;
color:seashell;
opacity:80%;
padding-top:60;
background-color:black;
text-align:center;
}
/Header/
header{
padding-top:200px;
}
ul{
margin:30px auto;
padding:0 20px;
list-style:none;
display: inline-block;
}
li {
//color:seashell;
text-decoration: underline;
//float:left;
text-align:left;
text-transform: uppercase;
line-height: 25px;
}

li a {
color:seashell;
}

/Main Section/
body{
background-image: url(“https://images.unsplash.com/photo-1587045525473-4861b1f9b5b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80”);
background-repeat: no-repeat;
background-attachment: fixed;
width:100%;
background-position: center center;
background-size: cover;
}

.sectionOne{
background-color: black;
//margin:50px;
width:100%;
padding-bottom:50px;
margin-top:200px;

}

/Services Section/
.services {
display:flex;
background-color:rgba(189, 140, 36, 0.5);
//opacity:90%
flex-wrap:wrap;
//align-items:row;
width:100%;
//margin:auto;

}

#nails{
color:white;
background-color:black;
text-align:center;
min-width:100px;
height:150px;
margin:100px 50px;
display:inline-block;
word-wrap: break-word;
padding: 10 20px;
}
#hair{
color:white;
background-color:black;
text-align:center;
min-width:100px;
height:150px;
margin:100px 50px;
word-wrap: break-word;
padding: 10 20px;
}

button{
background-color:black;
margin:200px;
color:white;
width:200px;
height:50px
border:none;
text-align:center;
margin-bottom:550px;
margin-top:40px;
margin-left:130px;

}
#content{
display: table-cell;
vertical-align: middle;
}

footer{
background-color:black;
color:seashell;
position: fixed;
bottom:0px;
width:100%;
border:100px;
font-family: ‘Playfair Display’, serif;
color:seashell;

}

thanks in advance:)

Hey there @web1530003904 :slightly_smiling_face:
Since I don’t have your HTML, I can’t say for sure.

Depending on the container the button is in, I would recommend trying either:

margin: auto;

or

text-align: center;

sorry I am not sure why my html doesn’t show the raw version, here is a screenshot:

:pray:

The forums have allow a good many of HTML elements to be used when making a post.
This results in anything surrounded in < > not being displayed.

To display HTML you will have to use formatting, simply press this button:

Than copy/paste your code between the two rows of backticks:


With the code you provided, I would still use text-align: center; on the buttons parent container.

1 Like

thank you for the help! :pray:

1 Like