Button not correctly centered in flex container-CodePudding

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link href="styles.css" rel="stylesheet"/>
</head>
<body>

    <div >
        <button type="button" >Primary</button>
    </div>
    
</body>
</html>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link href="styles.css" rel="stylesheet"/>
</head>
<body>

    <div >
        <button type="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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link href="styles.css" rel="stylesheet"/>
</head>
<body>

    <div >
        <button type="button" >Primary</button>
    </div>
    
</body>
</html>

CodePudding user response：

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

<button type="button" >Primary</div>

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

CodePudding user response：

.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link href="styles.css" rel="stylesheet"/>
</head>
<body>

    <div >
        <button type="button" >Primary</button>
    </div>
    
</body>
</html>

CodePudding user response：

.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link href="styles.css" rel="stylesheet"/>
</head>
<body>

    <div >
        <button type="button" >Primary</button>
    </div>
    
</body>
</html>