What is the best way to perfectly center a div both vertically and horizontally?

Despite being new to CSS, I've experimented with various approaches but am struggling to center my div vertically.

Parent :

#ModalScroll{
    position:absolute;
    top:0;
    left:0;
    z-index:1001; 
    height:1px;
    width:1px;
    overflow:hidden;
    display:none;
    font-size:100%;
    text-align:left;
}

Child :

.ModalDialog{
    border:1px solid #3C4749;
    background-color:#FFF;
    margin:0 auto 0 auto;
    display:none;
    font-size: 12px;
    box-sizing: border-box; 
    width: 280px;
    height: 160px; 
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -80px 0 0 -140px;
}

I'm uncertain whether a jQuery solution would be more appropriate, but I'd prefer to find a CSS-based one.

jqueryhtmlcssinternet-explorercentering

Answer №1

Have you confirmed using firebug that all your css attributes are being applied correctly? It's possible that another CSS file is overriding some of the styles for your element.

position:absolute; /*Alternatively, it could be fixed*/
left:0; right:0;
top:0; bottom:0;
margin:auto;

This should solve the issue (as mentioned in Center a DIV horizontally and vertically). You might want to consider adding "!important" to each attribute...

UPDATE: Below is the updated CSS with "!important" added:

position:absolute !important;
left:0 !important;
right:0 !important;
top:0 !important;
bottom:0 !important;
margin:auto !important;

Answer №2

Give this a shot:

Try Out This HTML Code

<div class="container">
    Insert your content here
</div>

CSS Styling

.container {
    width: 250px;
    height: 350px;
    border: 2px solid blue;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}

Answer №3

Check out this code in response to your query,

Here is the snippet for HTML :

<div class="maindiv">
    <p class="hdiv">JSFIDDLE V</p>
</div>
<br>
<div class="maindivh">
    <p class="hdih">JSFIDDLE H</p>
</div>

The CSS code :

.maindiv {   position:relative; border:1px solid #cfcfcf; height:50px; width:200px; }

.hdiv {width:200px; text-align:center; height:50px;}

.maindivh { position:relative; border:1px solid #cfcfcf; height:150px; width:200px; }

.hdih { vertical-align:middle; display:table-cell; line-height:150px; text-align:center; width:200px; }

Take a look at the demo

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

Which CSS properties can I implement to ensure that the text remains legible regardless of the background behind it?

Looking ahead, I am displaying an issue where the colors are almost perfect, but when different percentages are applied, some or all of the text becomes obscured. My goal is to assign the font color based on the background difference. I vaguely remember s ...

css

Leverage AJAX data to dynamically generate an input field within a Laravel application

. Hey everyone, I'm currently working on implementing ajax for a search functionality. The goal is to display links to the search results' pages along with checkboxes next to each result, allowing users to select orders for printing. Although I ...

javascriptjqueryajaxlaravel-4

Executing a JQuery function to trigger an action on a controller without performing a redirection afterwards

I have created a JQuery confirmation popup that includes Yes and No buttons. When the Yes button is clicked, it triggers the following function: function performTask() { $("#confirmPopup").dialog("close"); var someKey = $("#som ...

jqueryasp.net-mvc

Click to Rotate Angular Chevron

Is it possible to animate the rotation of a chevron icon from left-facing to right-facing using Angular? CSS: .rotate-chevron { transition: .1s linear; } HTML: <button [class.button-open]="!slideOpen" [class.button-close]="slideOpe ...

cssangulartypescript

Navigating through dropdown menus using webdriver

I am having trouble selecting a specific element from a dropdown menu. The element I am trying to select is labeled Edit/ViewResume 1st Attempt For my initial try, I attempted to use the Action and Select class methods to choose the desired webelement ...

javahtmlseleniumdrop-down-menuselenium-webdriver

What is the process for altering fonts in a Chrome OS application?

After extensive research on the Internet, I have been unable to find clear instructions on how to modify the text font in a Chrome OS application. Most search results pertain to adjusting the font for the OS user rather than the developer of the app. My i ...

htmlgoogle-chrome-os

The "add to cart" button is unresponsive

My issue is that the add to cart button on my website is not responding properly. I have implemented JavaScript on the add to cart button, where I have assigned an attribute called data-product with a value of {{product.id}}. var updateBtns = document.g ...

javascripthtmlcssdjango

Removing the background inside an Iframe using HTML

Is there a method to eliminate the background color from the original site within an Iframe? It currently displays as white. Would it be possible to achieve this with Javascript? ...

javascripthtmlcssiframe

What is the best way to position a div below another sticky div when the first div's height is constantly changing

I am facing a challenge with scrollable text and sticky headers on my webpage. The top text has dynamic height based on the content below, which is followed by a sticky header with its own dynamic height. Now, I want to add another sticky header below the ...

htmlcss

What is the best way to create divs with no gaps in between them?

I am trying to create a div structure that resembles the one shown below, with one div on top and two divs under it. I would prefer not to use tables, ensuring there is no space between the divs, and if possible, having collapsed borders. _________ | ...

csshtmlcss-position

What is the best way to extract content between <span> and the following <p> tag?

I am currently working on scraping information from a webpage using Selenium. I am looking to extract the id value (text) from the <span id='text'> tag, as well as extract the <p> element within the same div. This is what my attempt ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

What is the best way to emphasize a table row during a search rather than just the text?

I am currently using a jQuery script that searches for a specific string in a simple text input field and highlights only the string itself if it is found. However, my data is organized within a table and I am interested in knowing if it is possible to hig ...

javascriptjqueryhtml

How to Arrange Images in Columns Next to Each Other Using Bootstrap 4

Currently using Bootstrap 4, I am facing an issue where I am attempting to align two images side by side on medium or larger viewports within columns, but they keep stacking on top of each other instead. <div class="row"> ...

htmlbootstrap-4

allowing users to scale content and adjust layouts based on device characteristics

When I inherited the maintenance of a website, I discovered that it was not optimized for mobile devices. The client requested that the site be made accessible on mobile devices, so I attempted to ensure that the mobile version mirrored the desktop version ...

cssresponsive-designmedia-queriesviewport

Regular expression that can be used to extract information from a text file by filtering and returning only

When I open a text file, it contains several lines like the examples below. surname australia enter name j.jonhs enter name j.cause enter name f.london enter I am seeking assistance to modify the code snippet below so that it captures the first line m ...

javascripthtml

Does HTML5 officially provide the speechsynthesis API for users?

Can someone clarify if speech synthesis is officially supported by HTML5 for converting text-to-speech? ...

htmltext-to-speechmozillaw3cspeech-synthesis

Can CSS stylesheets be set up to automatically load based on the browser being used to access the website?

I am inquiring because I recently completed a beautiful homepage design and, after viewing the website on Chrome and Safari on OSX, I noticed that certain elements were broken when I opened it in Firefox. In addition, an issue I was experiencing with the ...

csshtmlcross-browserstylesheet

Percentage-based framework for CSS grid system

Exploring the world of CSS grids has been a fascinating learning journey for me. After delving into my research and consulting resources like: http://css-tricks.com/dont-overthink-it-grids/ I've noticed that percentage-based grids generally make the ...

css

Loading a local image using Jquery in an open dialog

Hello to all fellow stackoverflow users! I am currently facing an issue while trying to load a local jpeg file into a dialog box. The problem is that no matter what, the same table information keeps getting appended and reopened in the dialog box. I must h ...

javascriptjqueryajaxjspjquery-ui

Could not locate the provider: $stateProvider

It's puzzling to me why this code is not recognizing the $stateProvider. Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:unpr] Unknown provider: $stateProvider This is a simple example of a module: ( ...

javascripthtmlangularjs