How to vertically center a div within a parent div with a fixed position?

I am facing an issue where I have a div positioned on top of another fixed position div, and I am looking for a way to vertically align the first div. Below is the code snippet that I am currently working with:

<div class="overlay">
    <div id="dialogInvoice">
        content
    </div>
</div>

Here is the CSS associated with the code:

.overlay {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    z-index: 10;
}

#dialogInvoice {
    width: 390px;
    height: 722px;
    margin: 0 auto;
    padding-top: 28px;
    border-radius: 4px;
    background: #ffffff;
    position: relative;
}

If anyone has any suggestions or solutions to help me achieve vertical alignment within this setup, I would greatly appreciate it. I have already tried using the line-height method, but it seems to only work with plain text.

htmlcssvertical-alignmentabsolute

Answer №1

If the dimensions of your element are not fixed, using other solutions may require JavaScript to calculate values.

Consider this alternative approach:

#dialogInvoice {
    width: 390px;
    height: 722px;
    padding-top: 28px;
    border-radius: 4px;
    background: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Answer №2

To enhance the appearance of your #dialogInvoice in CSS, you should make the following adjustments:

top: 50%;

and modify the margin to

margin: 361px auto;

(361 represents half of 722)

This will position your container halfway down the page initially, and then move it back up by the necessary distance, which is exactly half of its height (361px).

For further clarification, refer to this jsfiddle.

Answer №3

If you want to achieve the desired effect, you can use the following CSS:

.custom-overlay {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    z-index: 10;
}

#modalDialog {
    margin: 0 auto;
    padding-top: 28px;
    border-radius: 4px;
    background: #ffffff;
    position: absolute;
    top: 100px;
    bottom:100px;
    left:100px;
    right:100px;
}

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

What is the procedure for displaying the complete text for choices on an ionic select button?

On my page, I have included an Ionic select button. The problem is that the options display a long string, and I want them to show the full text without truncating with dot-dot-dot like this: This is how my code looks: <ion-item *ngIf="select == &apos ...

htmlionic-framework

Customizing font sizes for individual fonts within the same font family

I am designing a website in a language other than English. This means that the text on the webpage will be a mixture of English and other languages. In order to make sure the text displays correctly, I have set the font-family like this: p{ font-family: ...

cssfonts

Adding a line and text as a label to a rectangle in D3: A step-by-step guide

My current bar graph displays values for A, B, and C that fluctuate slightly in the data but follow a consistent trend, all being out of 100. https://i.stack.imgur.com/V8AWQ.png I'm facing issues adding lines with text to the center of each graph. A ...

javascriptcssd3.js

Copy and paste the code from your clipboard into various input fields

I have been searching for a Vanilla JavaScript solution to copy and paste code into multiple input fields. Although I have found solutions on the internet, they are all jQuery-based. Here is an example of such a jQuery solution <input type="text" maxl ...

javascripthtmltypescript

To generate a new <div> element by clicking a button and then clicking on it using C# Selenium

Before clicking the button, this is the initial HTML code for the page: <div id="layerContainer"> </div> After clicking the button, the code changes as shown in the picture here I have been attempting to locate the new button, but I keep rec ...

c#htmlseleniumphantomjs

evolving the design of mui stepper

I am looking to customize the code below for my specific needs I want to change the icon from https://i.sstatic.net/dtPHU.png to this: https://i.sstatic.net/ct7Zv.png I am unable to modify the style and also need to add an intermediate step I have incl ...

cssreactjsmaterial-uistepper

Managing images in JavaScript while conserving memory

Welcome I am embarking on a project to construct a webpage using HTML, CSS, JavaScript (jQuery), and nearly 1000 images. The length of the HTML page is substantial, around 5000px. My vision involves creating a captivating visual experience for users as t ...

javascriptjqueryhtmlcssoptimization

Only a select few expandable elements in the jQuery accordion

How can I create an accordion menu with only a few expandable options? I am looking to include the following items in my menu: Home, Support, Sales, Other The "Home" option is just a link without any sub-menu. Clicking on it should direct users to a spec ...

javascriptjqueryhtmlcssaccordion

Navigating between divs with a 100% height using up and down movements

I am working on a website that is structured into different sections using divs with shared classes but unique IDs. Each div is set to take up 100% of the viewport height. To navigate between these sections, I want to provide Up/Down arrow buttons for user ...

javascripthtmljquerycss

Pan motion gesture above HTML components

Is it possible to create a hovering effect over elements in a container using a pan gesture? https://i.sstatic.net/E6G56.gif Here's the HTML code: <div class="container"> <div class="item"></div> <div class="item"></div ...

javascripthtmlgesturehammer.jspan

Issue with $http.get in fetching information from PHP server

Dealing with duplicate keys error in AngularJS, PHP, and MySQL I have been working on a web-based system and encountered an issue with ng-repeat displaying duplicate keys. I am unsure how to resolve this issue. The select all brand functionality seems to ...

phphtmlangularjs

Troubleshooting issue with JQuery AJAX loading Bootstrap Dropdowns

I have a website on GitHub Pages that uses Bootstrap, but I'm having issues with the drop-down menu in the navbar. Sometimes it works and sometimes it doesn't. I am using $("#nav").load("url"); to load the navbar so that I can make changes and ha ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can I properly save a PNG image with alpha transparency to be compatible with IE6?

Seeking advice on saving a visually pleasing 1 or 8-bit PNG image that renders well in IE6. Open to suggestions on alternative methods as I have experience with Fireworks but exploring new options. Thank you in advance! ...

cssimageinternet-explorer-6pngalpha-transparency

Understanding CSS classes in ReactJS Material UI componentsJust wanted to clarify some things

When it comes to styling Material UI components, the recommended approach is to utilize their useStyles function. Here's an example: const useStyles = makeStyles(theme => ({ root: { marginTop: '15px', display: 'f ...

cssreactjsmaterial-ui

Problem with displaying JSF Bootstrap Glyphicons

I recently encountered a problem in my web app where my Glyphicons in Bootstrap suddenly stopped working, appearing as empty squares for no apparent reason. Even after ensuring that the font files were intact and replacing them with fresh ones from versi ...

htmlcsstwitter-bootstrapjsf

A step-by-step guide on utilizing URL creation in Yii1

My controller is saved in the directory Controller/SiteAction/1700/Participate and my view file can be found at views/site/eventview. I need to add a button inside eventview that directs to Controller/SiteAction/1700/Participate. Therefore, I have to utili ...

htmlajaxyii1.x

Troubleshooting issue with jQuery animate not correctly scrolling

I am experiencing an issue with my jQuery code that is supposed to scroll a smaller container element within a larger container element when a button is clicked. Despite testing with an alert and verifying that the code is working, the scrolling functional ...

javascriptphpjqueryhtml

Is it possible to connect a JavaScript file to an HTML document within a React application?

I have been developing a React website with the following file structure: public: index.html second.html src: index.js second.js table.js forms.js The main page (index.js) contains both a form and a table. One of the columns in the table has a link t ...

javascripthtmlreactjsreact-nativedom

Tips for fading an image as you scroll using CSS and JavaScript?

I have been dedicating my day to mastering the art of website development. However, I am facing a challenge that is proving to be quite difficult. I am looking to create a smooth transition effect where an image gradually blurs while scrolling down, and re ...

javascripthtmljquerycss

What is the process for implementing a banner across the entire website?

I understand that this question resembles one found at this link, but I did not find a clear solution there. Currently, I am utilizing <?php include "banner.html"; ?>. However, in order for this method to work, I must change the extension of ALL page ...

phphtml