The button is not properly aligned at the center of the flex container

My attempt to center a button in a fluid container with 100% vertical height and provide it with an offset from the bottom of the screen is almost successful, but the button is not perfectly centered - it is offset from the left. You can view the example in the code snippet below.

I'm not sure what I'm overlooking here... how can I accurately center the button in the middle of the screen?

My site's code includes an image as the background in the main fluid container, which is why I have specified background size: cover; among other things 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8be9e4e4fff8fff9eafbcbbea5baa5b8">[email protected]</a>/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>

htmlcssbootstrap-4bootstrap-5

Answer №1

insert

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

into the .centered-button element to center it.

this link provides a comprehensive 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8cac7c7dcdbdcdac9d8e89d8699869b">[email protected]</a>/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>

Additionally, you can easily achieve this using flex.

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b484f1eaf5eaf7">[email protected]</a>/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>

Answer №2

For better alignment, consider implementing Bootstrap's alignment tools instead of relying on regular CSS. Check out Flex containers for more information. Here's an example:

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

To horizontally align your element, add d-flex justify-content-center. For vertical alignment options, refer to Vertical alignment.

Answer №3

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6848989929592948796a6d3c8d7c8d5">[email protected]</a>/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>

Answer №4

/*To ensure the button is centered on all devices, use the display:flex; property in the parent div of the button. This, along with display: flex;, requires two additional properties:
- align-items:center; (centers the button vertically)
- justify-content:center; (centers the button horizontally)

Using position: absolute; will not center the button on all devices. Similarly, using left 50% will not work universally for different devices */

.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/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide for utilizing a table value as a parameter in a mySQL query with PHP

My website features an HTML table that is filled with data pulled from a mySQL table using PHP. Each row in the table is clickable, and when clicked, it opens a modal that contains a form to update and submit data back to the database using a mysql update ...

javascriptphpjqueryhtmlmysql

What could be the reason for the inconsistent behavior of onClick, causing it to occasionally fail to display the associated

I just started using typescript 2 days ago, mainly to create a custom component for my streamlit app. I've made a navigation bar with a tab that can be clicked on the sidebar, but it's displaying some erratic behavior. Sometimes when I click on t ...

pythonhtmltypescriptonclicktabs

Ensure that the radio button is set to its default option when the user accesses the page

I have a model with a 'PartActionType' enum which includes Transfer, Harvest, and Dispose options. public enum PartActionType { Transfer, Harvest, Dispose } On my view page, I am displaying these options using ...

c#htmlcssasp.net-mvcrazor

Discover the procedure to alter date formats in MongoDB

I recently created a MongoDB collection using Node.js with the following code: var mongoose = require('mongoose'); var TTTUsersSchema = new mongoose.Schema({ username: String, password:String, active: Boolean, created_at: { type: Dat ...

htmlnode.jsmongodb

What is the best way to retrieve the inner HTML or text content of a tag?

How can I retrieve the text value of an anchor tag in HTML using only golang.org/x/net/html, without external libraries? In my code sample below, I am able to extract the values of href and title with html.ElementNode. However, I need a way to specifically ...

htmlgo

Top ways to avoid default on anchor tags: best practices for preventing this issue

Previously, excluding the criticism for not using unobtrusive JS, I typically employed anchors with inline onclick attributes for AJAX loading in the following format: <a href="http://example.com/some/specific/link.php?hello=mum" class="menu" id="m ...

javascripthtml

Create a typing effect in Javascript that mimics the user's input

Trying to simulate a typing effect with the sentence extracted from user input using JavaScript, but encountering some issues. Successfully capturing and displaying the input in the console with console.log(), however, incorporating the typing effect func ...

javascripthtml

The boundary extends fully to the right

Recently, I created a calculator to convert kilograms to pounds and encountered an issue when trying to add a border to a p element. The problem was that the border extended all the way to the right side of the page. Here is the corresponding HTML code: &l ...

htmlcssborder

Effective URL structure with nested ui-view in AngularJS

It is common knowledge that Angular functions as a SPA (Single Page Application). I am seeking the most effective approach to display a main left-side menu selector page, where clicking on any menu item will load the content in the right-side view div. Th ...

javascripthtmlcssangularjsangular-ui-router

Resize the Bootstrap select element based on its contents

My HTML code includes a <select> element that is styled using Bootstrap 5. <div class="col-md-12"> <div class="mb-3"> <label asp-for="Schedule.Minutes" class="control-label"></l ...

htmlcsstwitter-bootstrapasp.net-corebootstrap-5

A distinctive noise is heard when hovering over multiple instances of a div

I'm trying to implement a feature where a unique sound plays when hovering over a specific div element with a particular class (.trigger). However, I am encountering an issue where multiple instances of this div class result in the same sound being pl ...

javascriptjqueryhtmlaudiohover

blurred image effect on bootstrap card hover

My attempt to create a blurred image effect on a bootstrap card hover is not working as expected. The blur effect works fine without the hover. Here is the code I have been using: .card-img { transition: all 1s ease; -webkit-filter: blur(0px); ...

htmlcssbootstrap-4

ReactJS how to prevent accordion from collapsing automatically

My custom accordion layout for the features needed in the site I am building is not working well with Jquery. How can I modify it to collapse properly? Specifically, I want it so that when I open number 2, number 1 will automatically close. I've trie ...

javascriptjqueryhtmlcssreactjs

Defining colors in TinyCSS and GTK themes using the `@define-color

I've been working on a project that involves parsing GTK+3 themes using the TinyCSS library. However, it seems that TinyCSS is not recognizing lines such as @define-color base_color #FAFAFA; These definitions are stored in parser.styleSheets[0].er ...

pythoncsscolorsgtk

Adjust the width of the dropdown menu to match the text input field using jQuery

Struggling with jquery-mobile to collect user information, I am facing an issue aligning the width of my select menu with the text input fields. Despite successfully matching the background and border colors of the select menu with the text input fields, ...

jqueryhtmlcssjquery-mobile

Unable to retrieve list using Selenium in C# due to issues with FindElements method

Currently, I am working with C# and NUnit. I have encountered an issue where I need to extract the value from a span element and store it in an ArrayList. This is the code I am using to retrieve the price list: var productprice = driver.FindElements(By. ...

c#htmlcssvisual-studioselenium

Invoke a node.js function from within an HTML document

Seems like a recurring question. The closest solution I found was on this page: execute a Nodejs script from an html page? However, I'm still having trouble grasping it. Here's the scenario: I have an express server set up with the following ...

htmlnode.jsexpress

What causes jquery height and javascript height to both be returned as 0?

I'm facing an issue with a visible div on my screen - despite being visible, its height always returns as 0. I've attempted various jQuery and JavaScript methods to retrieve the height, but it consistently shows as 0. Here's the structure of ...

javascriptjqueryhtmlcss

The table on the page shifts position when viewed on different devices, sometimes not remaining between the header and footer

Here is a link to see how my page looks with the header, table, and footer: https://i.sstatic.net/U6tdO.png If you want to see how it looks when responsive (with smaller width), check out this link: https://i.sstatic.net/zsGkc.png I have encountered 2 ma ...

htmlcssangular

What is the best way to enlarge a navbar from the top using Bootstrap 5?

I have a button labeled "MENU" at the top and a logo image below it. Currently, the menu expands from the bottom of the button. I would like it to expand from the top instead, and when the menu is expanded, the button should be under the navigation list, n ...

htmlcssbootstrap-5