How do I align button to the middle of the screen?

Question

I am trying to get 2 button in the middle of my screen. However these buttons are overlapping with the code that I have now. I actually don't use that much CSS, so this is probably a newbie question.

This is my html:

.wrapper {
  text-align: center;
}

.button {
  position: absolute;
  top: 50%;
}

.button1 {
  background-color: Transparent;
  background-repeat:no-repeat;
  padding:20px;
  color: white; 
  border: 3px solid #fff;
}

.button1:hover{
  border: 3px solid #000;
}

<div id="particles-js"></div>
<div class="wrapper">
  <button class="button button1">button</button>
  <button class="button button1">button2</button>
</div>

I have no idea on how to align these buttons to the middle and leave a little space in between the buttons. If someone can help me, I'd really appreciate that!

Answer 1

.button {position: absolute; top: 50%; left: 50%}

Answer 2

Using text-align: center to horizontally center nested elements

You can achieve this by declaring text-align: center on the containing parent element (.wrapper) and declaring display: inline-block on nested children elements.

position: absolute must be removed since we want to keep elements in the natural document flow - in order for this method to work, elements must be either static or positioned relative.

Note: for horizontal alignment, using text-align: center to work as expected, a few requirements should be met:

1. The containing parent element must be a block element (e.g: display: block)
2. The nested elements you need centered should be inline-block elements (e.g: display: inline-block)
3. No float rules should be declared on the nested elements you are intending to horizontally align, float rules will negate any effort to align elements in this way

* {
  box-sizing: border-box; /* always useful when working with border or padding properties, or any other property that can effect the box-model */
}

.wrapper {
  text-align: center;
  background: gray; /* so we can actually see what's happening */
  padding: 20px; /* Give us some breathing room */
}

.button {
  display: inline-block; /* naturally creates "whitespace" between inline elements */
}

.button1 {
  background-color: Transparent;
  background-repeat:no-repeat;
  padding:20px;
  color: white; 
  border: 3px solid #fff;
  /* non-essential augmentations */
  transition: .7s; /* smooth out the state change on pseudo-state :hover */
  min-width: 100px;
}

.button1.with-margin {
  margin: auto 10px; /* for additional spacing between inline elements*/
}

.button1:hover{
  border: 3px solid #000;
}

<div class="wrapper">
  <button class="button button1">button</button>
  <button class="button button1">button2</button>
</div>
<br>
<div class="wrapper">
  <button class="button button1 with-margin">button</button>
  <button class="button button1 with-margin">button2</button>
</div>

Or... you could Just use Flex...

Using flex-box to horizontally center nested elements

By declaring display: flex on the containing parent element (.wrapper), then justify-content: center to specify the horizontal alignment, you get the intended result. flex-box leverages the browser's built-in power to do all the "heavy lifting" and calculations for precision alignment - which, incidentally, also makes it a popular responsive solution.

.wrapper {
  text-align: center;
  background: gray; /* so we can actually see what's happening */
  padding: 20px; /* Give us some breathing room */
  /* Additional */
  display: flex;
  justify-content: center;
}

* {
  box-sizing: border-box; /* always useful when working with border or padding properties, or any other property that can effect the box-model */
}

.wrapper {
  text-align: center;
  background: gray; /* so we can actually see what's happening */
  padding: 20px; /* Give us some breathing room */
  /* Additional */
  display: flex;
  justify-content: center;
}

.button {
  display: inline-block; /* naturally creates "whitespace" between inline elements */
}

.button1 {
  background-color: Transparent;
  background-repeat:no-repeat;
  padding:20px;
  color: white; 
  border: 3px solid #fff;
  /* non-essential augmentations */
  transition: .7s; /* smooth out the state change on pseudo-state :hover */
  min-width: 100px;
  margin: auto 10px; /* additional spacing between nested elements */
}

.button1:hover{
  border: 3px solid #000;
}

<div class="wrapper">
  <button class="button button1">button</button>
  <button class="button button1">button2</button>
</div>

Heads up! flex-box has poor or limited support for legacy browsers, so if this is going to be a concern for you, it's probably better not to use it in production.

IE <= 9 - Not Supported
IE 10,11 - Partial Support
See more: https://caniuse.com/#feat=flexbox

Edit

Vertical & Horizontal Alignment using flex-box & position: absolute

.wrapper {
  text-align: center;
  background: gray; /* so we can actually see what's happening */
  padding: 20px; /* Give us some breathing room */
  /* Additional */
  display: flex;
  justify-content: center;
  /* Further Additions */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

* {
  box-sizing: border-box; /* always useful when working with border or padding properties, or any other property that can effect the box-model */
}

.wrapper {
  text-align: center;
  background: gray; /* so we can actually see what's happening */
  padding: 20px; /* Give us some breathing room */
  /* Additional */
  display: flex;
  justify-content: center;
  /* Further Additions */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.button {
  display: inline-block; /* naturally creates "whitespace" between inline elements */
}

.button1 {
  background-color: Transparent;
  background-repeat:no-repeat;
  padding:20px;
  color: white; 
  border: 3px solid #fff;
  /* non-essential augmentations */
  transition: .7s; /* smooth out the state change on pseudo-state :hover */
  min-width: 100px;
  margin: auto 10px; /* additional spacing between nested elements */
}

.button1:hover{
  border: 3px solid #000;
}

<div class="wrapper">
  <button class="button button1">button</button>
  <button class="button button1">button2</button>
</div>

Answer 3

If you remove absolute position from button that it automatically center

.wrapper {
  text-align: center;
  background:#ccc;
  padding: 20px;  
}

/*.button {
  position: absolute;
  top: 50%;
}*/

.button1 {
  background-color: Transparent;
  background-repeat:no-repeat;
  padding:20px;
  color: white; 
  border: 3px solid #fff;
}

.button1:hover{
  border: 3px solid #000;
}

<div id="particles-js"></div>
<div class="wrapper">
  <button class="button button1">button</button>
  <button class="button button1">button2</button>
</div>

Updated Answer using your screen short. For that just wrap the both div in one parent div and set position relative to it. and add position absolute in .wrapper.

.hero-banner {
  background:#ccc;
  height: 300px;
  position: relative;
}
.wrapper {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  text-align: center;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button1 {
  background-color: Transparent;
  background-repeat:no-repeat;
  padding: 20px;
  color: white; 
  border: 3px solid #fff;
  margin:0 5px;
}

.button1:hover{
  border: 3px solid #000;
}

<div class="hero-banner">
  <div id="particles-js"></div>
  <div class="wrapper">
    <button class="button button1">button</button>
    <button class="button button1">button2</button>
  </div>
</div>

Answer 4

<style type="text/css">
body{
    padding: 0px;
    margin: 0px;
}
.wrapper {
  text-align: center;
  display: inline-block;
}

.button {
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.button1 {

  background-color: Transparent;
  background-repeat:no-repeat;
  padding:20px;
  color: white; 
  border: 3px solid #fff;

}

.button1:hover{
  border: 3px solid #000;
}
</style>

<div id="particles-js"></div>
<div class="wrapper">
  <button class="button button1">button</button>
  <button class="button button1">button2</button>
</div>