0

I am trying to center a button in a fluid container with 100% vertical height and give it an offset from the bottom of the screen. I am pretty much there, however, the button is offset from the left and not correctly centered. See the example in my code snippet.

I am not sure what I am missing here... how can I correctly center the button to the center of the screen?

In my site code I have an image as my background in the main fluid container, hence why I have background size: cover; etc in my css.

.main-div {
    background-color: pink;
    min-height: 100vh;
    min-width: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    text-align: center;
}

.centered-button {
    position: absolute;
    bottom: 3rem;
    width: 15rem;
    border-radius: 3rem;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-right-width: 4px;
    border-left-width: 4px;
    box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
    transition: all 0.3s ease 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link href="styles.css" rel="stylesheet"/>
</head>
<body>

    <div class="fluid-container main-div">
        <button type="button" class="btn btn-primary centered-button">Primary</button>
    </div>
    
</body>
</html>
ojp
  • 973
  • 1
  • 11
  • 26

4 Answers4

1

You should implement bootstrap alignment instead of using regular css, Try Flex containers. See my example below:

<button type="button" class="d-flex justify-content-center btn btn-primary">Primary</div>

Adding d-flex justify-content-center will horizontally align your element. To align the element vertically have a look at Vertical alignment

Roe
  • 633
  • 2
  • 14
1

add

left: 50%;
transform: translateX(-50%);

to .centered-button element for center that.

this link is complete answer for centering with position

.main-div {
    background-color: pink;
    min-height: 100vh;
    min-width: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    text-align: center;
}

.centered-button {
    position: absolute;
    bottom: 3rem;
    width: 15rem;
    border-radius: 3rem;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-right-width: 4px;
    border-left-width: 4px;
    box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
    transition: all 0.3s ease 0s;
    left: 50%;
    transform: translateX(-50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link href="styles.css" rel="stylesheet"/>
</head>
<body>

    <div class="fluid-container main-div">
        <button type="button" class="btn btn-primary centered-button">Primary</button>
    </div>
    
</body>
</html>

and you can use flex to do that simply .

.main-div {
    background-color: pink;
    min-height: 100vh;
    min-width: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.centered-button {
    bottom: 3rem;
    width: 15rem;
    border-radius: 3rem;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-right-width: 4px;
    border-left-width: 4px;
    box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
    transition: all 0.3s ease 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link href="styles.css" rel="stylesheet"/>
</head>
<body>

    <div class="fluid-container main-div">
        <button type="button" class="btn btn-primary centered-button">Primary</button>
    </div>
    
</body>
</html>
Ahmad MRF
  • 1,346
  • 1
  • 6
  • 16
1

.main-div {
    background-color: pink;
    min-height: 100vh;
    line-height:100vh;
    min-width: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    text-align: center;
}

.centered-button {
    vertical-align: middle;
    bottom: 3rem;
    width: 15rem;
    border-radius: 3rem;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-right-width: 4px;
    border-left-width: 4px;
    box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
    transition: all 0.3s ease 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link href="styles.css" rel="stylesheet"/>
</head>
<body>

    <div class="fluid-container main-div">
        <button type="button" class="btn btn-primary centered-button">Primary</button>
    </div>
    
</body>
</html>
Erica B.
  • 31
  • 2
1

/*You need to use display:flex; property of css on parent div of button to align it centerly regardless of any device you view it on
along with display: flex; you need these two property also
- align-items:center; ( this aligns button in center vertically )
- justify-content:center; ( this aligns button in center horizontally )

using positon absolute will not center the button on every device. as well as using left 50% will also not work for every device */

.main-div {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background-color: pink;
    min-height: 100vh;
    line-height:100vh;
    min-width: auto;
    position: relative;
}

.centered-button {
    bottom: 3rem;
    width: 15rem;
    border-radius: 3rem;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-right-width: 4px;
    border-left-width: 4px;
    box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
    transition: all 0.3s ease 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link href="styles.css" rel="stylesheet"/>
</head>
<body>

    <div class="fluid-container main-div">
        <button type="button" class="btn btn-primary centered-button">Primary</button>
    </div>
    
</body>
</html>
Jatin Pandita
  • 11
  • 5
  • Code-only answers are not very useful long term. Please consider [edit]ing to add an explanation of what you changed. – General Grievance May 03 '22 at 14:51
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 03 '22 at 16:06
  • You need to use display:flex; property of css on parent div of button to align it centerly regardless of any device you view it on along with display: flex; you need these two property also - align-items:center; ( this aligns button in center vertically ) - justify-content:center; ( this aligns button in center horizontally ) using positon absolute will not center the button on every device. as well as using left 50% will also not work for every device – Jatin Pandita May 23 '22 at 08:48