How can I center an element without using "position: absolute;"

Question

I'm working on my personal site and I need a few buttons in the center of the screen which will be links to things like my GitHub and resume and contact info but I can't center my buttons properly, the problem I'm getting is because of position: absolute; When I use this the items are properly centered but they all stack together and when I don't have this the items have proper space in between them but they are all stuck to the top left corner of the page, all the online tutorials are saying to use position: absolute; so if anyone can help that would be great, I'll put all my code below.

button{
    width: auto;
    display: table;
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 20px;
    color: #42337d;
    cursor: pointer;
    margin-top: 25px;
    transition: .2s;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    font-size: large;
     margin: 0;
    position: absolute;
    top: 45%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    outline: none;
}

<html>
<head>
    <title>site</title>
    <script type="text/javascript" src="main.js"> </script>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
</head>
<body>
    <button type="button" onClick="onClick()">GitHub</button> 
    <button type="button" onClick2="onClick2()">Resume</button>
    <button type="button" onClick3="onClick3()">Contact Me</button>
</body>
</html>

score 0 · Accepted Answer · answered Mar 09 '21 at 05:32

ADD this CSS

body{
margin: 0;
min-height: 100vh;
justify-content: center;
align-items: center;
display: flex;
}
button{
    width: auto;
    display: table;
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 20px;
    color: #42337d;
    cursor: pointer;
    margin-top: 25px;
    transition: .2s;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    font-size: large;
     margin: 0 10px;
     display:inline-block;
    outline: none;
}

<html>
<head>
    <title>site</title>
    <script type="text/javascript" src="main.js"> </script>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
</head>
<body>
    <button type="button" onClick="onClick()">GitHub</button> 
    <button type="button" onClick2="onClick2()">Resume</button>
    <button type="button" onClick3="onClick3()">Contact Me</button>
</body>
</html>

score 0 · Answer 2 · answered Mar 09 '21 at 05:33

use flex box flex-box
HTML

<body>
    <div class="container">
    <button type="button" onClick="onClick()">GitHub</button>
    <button type="button" onClick2="onClick2()">Resume</button>
    <button type="button" onClick3="onClick3()">Contact Me</button>
    </div>
</body>

CSS

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

button{
width: 10rem;
border: 1px solid #fff;
padding: 10px 20px;
border-radius: 20px;
color: #42337d;
cursor: pointer;
transition: .2s;
font-size: 18px;
font-weight: 600;
text-decoration: none;
font-size: large;
outline: none;
}

score 0 · Answer 3 · answered Mar 09 '21 at 05:34

As far I understand, you want to center your buttons. You can do it easily using flexbox. Here I'm attaching a demo to center all buttons according to viewport. Hope this will be helpful.

Make sure your button container has available amount of height and width to centering everything within it.

.btn-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
button{
  margin: 0 5px;
  width: auto;
  border: 1px solid #fff;
  padding: 10px 20px;
  border-radius: 20px;
  color: #42337d;
  cursor: pointer;
  transition: .2s;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  font-size: large;
  outline: none;
}

<html>
<head>
    <title>site</title>
    <script type="text/javascript" src="main.js"> </script>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
</head>
<body>
    <div class="btn-container">
        <button type="button" onClick="onClick()">GitHub</button>    
        <button type="button" onClick2="onClick2()">Resume</button>
        <button type="button" onClick3="onClick3()">Contact Me</button>
    </div>
</body>
</html>

How can I center an element without using "position: absolute;"

3 Answers3