Trouble Centering DIVs Using Flexbox

Thank you for taking the time to help me with my question on Stack Overflow. I am new to using this platform, so please be patient with me. I am facing an issue where I cannot get my divs to align in the center of the screen despite trying various solutions that I found through research. Can anyone provide insight into what may be causing this problem?

body{
    margin: 0;
    background-image: linear-gradient(to top, rgba(14, 245, 26, 0.829), rgb(0, 102, 255));
    background-attachment: fixed;
}

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Super Cool Calculator</title>
        <link href="style.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div id="heading">
                <h3>The Great Calculator</h3>
                <h4>By Antdog0101</h4>
            </div>
        </div>
    <script src="script.js"></script>
    </body>
</html>

After saving my code, the alignment issue persists as shown in this screenshot: https://i.sstatic.net/I1dRl.png

htmlcss

Answer №1

To achieve the desired layout, simply include the following CSS:

html, body {
    height: 100%;
}

Additionally, in your stylesheet:

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

Answer №2

Everything you have written is actually correct. However, I understand that you want to center everything on the screen rather than just within the div container. To achieve this, I have added height: 100vh in order to make sure the content is centered according to the viewport height.

The border was simply added to visualize the dimensions of the div, but it is not necessary for functionality.

body{
    margin: 0;
    background-image: linear-gradient(to top, rgba(14, 245, 26, 0.829), rgb(0, 102, 255));
    background-attachment: fixed;
}

.container{
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid black;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Super Cool Calculator</title>
        <link href="style.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div id="heading">
                <h3>The Great Calculator</h3>
                <h4>By Antdog0101</h4>
            </div>
        </div>
    <script src="script.js"></script>
    </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

Utilizing URL parameters in PHP: A beginner's guide

Recently, I've been working on a report error form containing 4 essential fields: Job ID $jobid Part ID part_id Machine Note Users access the form by clicking on a table corresponding to their tasks and are directed to a new page with a URL contain ...

phphtml

What is the best way to update the text within a Span element as the user moves through the Jquery slider?

Can I utilize jQquery to dynamically alter the text content of my "video_box_label" span element based on the active slide in my "flexslider" slideshow? For instance, when the slideshow transitions to the second slide, I want the text to change from "Mee ...

javascriptjqueryhtmlcss

HTML2Canvas now offers full compatibility with Scalable Vector Graphics (

Looking to snag a screenshot of a div that contains svg elements and other components using html2canvas. I came across 2 different versions of html2canvas. Version 1 Version 2 What sets them apart, and do either of them support svg elements and work wel ...

javascripthtmlsvghtml2canvaswebpage-screenshot

Adjust the Column Alignment Without Affecting the Entire Row or Table

My inquiry revolves around altering the sort direction of a particular column within a Telerik RadGrid. Utilizing Firebug, it is possible to identify and modify the sorting direction of a table (either master or detail). However, there seems to be no desig ...

c#asp.netcsstelerikradgrid

Troubleshooting Material-UI Menus

I need the menu to adjust its height dynamically as the content of the page increases vertically. Even though I have applied "height:100%" in the styles, it doesn't seem to work. Can anyone assist with this issue? Here is the code snippet: import R ...

javascriptcssreactjsmaterial-uimenu-items

Navigate through elements in jQuery by scrolling both up and down

Is there a way to create a scroll function similar to WhatsApp's search feature? When the user clicks on the search (located at the bottom), I want it to automatically scroll to the last element. For example, if the user clicks the up button, it sho ...

javascriptjqueryhtmlcss

Make the most of your Bootstrap 3 layout by utilizing a full page container that fills both the width and height between a fixed header and

I am currently working on a basic bootstrap page with the Example template from Bootstrap's website. I want the content in the middle to take up the space between the header and footer, while ensuring that both the header and footer remain visible at ...

javascriptjqueryhtmlcsstwitter-bootstrap

Switch the class of a div using jQuery when it is clicked

I need to implement functionality where 4 different links change the class of a specific div when clicked. For example, clicking on link 1 will change the class to s1, link 2 to s2, and so on. Below is some code that I have been working on, however, I am ...

jqueryhtmlcssclass

How can I automatically direct my NodeJS application to the login screen?

Here is the setup of my project structure: There is a simple folder called static, within which I have: index.html (the homepage for user registration) login.html (the login page) In the parent folder, there is a file named server.js: // NodeJS code for ...

javascripthtmlnode.jsexpress

Transforming item design in Flexbox when it wraps

Can styles be applied once an item wraps around? I have a two-column flexbox layout where the first item is fixed to the left and the second item should be centered in the remaining space. The solution mentioned here involves adding margin: auto to the se ...

htmlcssflexbox

Interactive <li></li> element for news ticker

Hello there! I am currently retrieving JSON data from a Wordpress site and converting the titles into list items as shown below: <?php $get=file_get_contents("https://www.thekashmirmonitor.net/wp-json/wp/v2/posts?categories=192"); $var=json_decode($get ...

javascriptphphtmljsonwordpress

Tips for designing a unique custom scrollbar

I'm in need of some CSS expertise to help me create a custom scroll bar that resembles the one shown in the image. The key requirement is for the background to be transparent, although I've temporarily positioned it against a green backdrop. ...

css

Connecting CSS and JS files in JSP was a bit of a challenge

Just starting out with jsp and using Glassfish server via netbeans. Struggling to link my jsp file with css and javascripts. Below is the structure of my files: Web Pages --Web-Inf --assets --css --style.css --js --jquery.js ...

javajavascriptcssjsp

Creating an email in Gmail with a pre-filled HTML body

Currently, I am developing a Django web application and seeking a way to enable my app to send emails via Gmail. I have explored creating a hyperlink that opens the compose window in Gmail, as well as prepopulating fields such as "to," "cc," "bcc," and bod ...

pythonhtmldjangogmailhtml-email

Manipulating links using JQuery: avoiding the binding of new links

I need to update a website with 50 pages that currently doesn't use ajax, making it cumbersome to make edits since changes have to be made on all 50 pages individually. After removing duplicate HTML from all 50 pages, I'm facing some issues: fu ...

javascriptjqueryhtml

What could be causing the buttons in this JavaScript trivia game to consistently show the wrong answer even after selecting the correct one?

My latest project involves creating a trivia game using vanilla JavaScript and Bootstrap. The game fetches questions from the API, displays the question along with four multiple choice answers on separate buttons using Bootstrap. To ensure the buttons are ...

javascripthtmlbuttonrandombootstrap-5

Tips on positioning a secondary navbar below a sticky navbar in Bootstrap 4

Currently, I am utilizing bootstrap 4 to create an application that features two navbars. Both of these navbars are intended to be fixed at the top, with the second navbar hiding as the user scrolls down. Here is the HTML code for the navbars: Navbar 1: ...

htmlcsstwitter-bootstrapbootstrap-4navbar

Is it not possible to unselect the radio button?

I've been trying to implement a jQuery solution that allows radio buttons to be deselected, but I'm encountering difficulties with the prop function. Every time this code is executed, my condition ($(e.currentTarget).prop('checked')) al ...

javascriptjqueryhtml

BeautifulSoup - Struggling to retrieve tbody element

Having trouble accessing a table nested deep inside multiple layers? I'm relatively new to utilizing Beautifulsoup and have been practicing with some basic examples. However, I've hit a roadblock as I can't seem to locate the "div" tag with ...

pythonhtmlbeautifulsouphtml-tbody

Reset hover effect upon exiting the current website

Hey there! I am currently dealing with an interesting situation regarding a link styled as a button on my website. <a href="http://externalsite" class="button" target="_blank">go to external site</a> Additionally, I have applied a hover effec ...

htmlcssgoogle-chromehover