Aligning Div Vertically in the Middle

I've scoured the internet and reviewed multiple articles, but none of them seem to solve my problem. I have a simple overlay with a loading animation that I toggle on and off. The issue is that I can't seem to center the animation both horizontally and vertically. Here is the CSS for the overlay div and the div containing the animation:

#pageOverlay {
  opacity:    0.5; 
  background: #000; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed;
  cursor: wait;
}
#floatingBarsG{
position:relative;
width:62px;
height:77px;
margin: auto;
}

HTML:

<div id="pageOverlay">
            <div id="floatingBarsG"> 
                <div class="blockG" id="rotateG_02"></div>
                <div class="blockG" id="rotateG_03"></div>
                <div class="blockG" id="rotateG_04"></div>
                <div class="blockG" id="rotateG_06"></div>
                <div class="blockG" id="rotateG_07"></div>
                <div class="blockG" id="rotateG_08"></div>
            </div>
        </div>

JSFiddle

htmlcssstyling

Answer №1

To position the element #floatingBarsG vertically in the center, you can utilize the CSS properties top:50%; and margin-top:-38px;:

#floatingBarsG{
    ...
    top:50%;
    margin-top:-38px;
}

The value of margin-top should be half of the height of the element.

For a working demonstration, refer to this example.

Answer №2

Check out the latest fiddle.

If your #floatingBarsG div has a specific width and height, you can apply the following CSS:

#floatingBarsG{
    position:absolute; /* Update position to absolute */
    width:62px;
    height:77px;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
}

By changing the position to absolute, along with defining the top, right, bottom, and left properties, combined with margin: auto, your loading div will be centered vertically.

Remember, this method of vertical centering only works when the centered element has a fixed or minimum height, and when its parent element's position is not set to static.

Eureka's approach is more compatible across browsers (unlike mine which may not work with IE8 and older versions), but it requires a fixed height.

Answer №3

Check out this modification I made with a border around the animation for better visualization:

#pageOverlay {
  opacity:    0.5; 
  background: #000; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed;
  cursor: wait;
}

#floatingBarsG{
    border: 1px solid #f00;
    position:relative;
    width:62px;
    height:77px;
    top: 50%;
    margin: auto;
    margin-top: -38px;
}

Take a look at the updated version here on JSFiddle.

Answer №4

With no examples using line-height posted by anyone else, I'll share my own demonstration:

SEE DEMO

The trick here is setting a fixed height and line height for the parent element:

.parent { height: 80px; line-height: 80px; }

Then, applying these styles to the child element:

.child { display: inline-block; vertical-align: middle; }

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

Issues with Display on IE 11 and Edge

Currently, I am in the process of working on a website that was initially created from a template by someone else. Since I am not a professional web designer, some elements on the site are not my own creation. Everything seems to be running smoothly on Fir ...

htmlcssinternet-explorerformattingdisplay

Create an animated underline for two CSS tabs

I'm interested in learning how to create a similar animation using JS, jQuery, or Vue Transitions with Bootstrap. I want to achieve the effect of moving the line under TAB1 to the right when TAB2 is clicked. Can anyone guide me on animating the div sm ...

jquerycssvue.jsbootstrap-4

What steps can I take to guarantee that a select change event occurs following the setting of ngmodel in Angular2?

I am facing an issue with a select element wherein a basic (change) handler is attached along with an ngmodel. Whenever an <option> with a ng value is set, the change handler triggers before the [(ngModel)] reflects the new values. <div> ...

javascripthtmlangularselect

Unable to see the column filter in the data table

My datatable setup includes the column filter js on the page, everything is displaying and working smoothly without any errors in the console. However, after the smoothness loads, the inputs at the bottom are not visible. <body> <div id="stab ...

javascriptphpjqueryhtmldatatables

Vue.js component communication issue causing rendering problems

When it comes to the Parent component, I have this snippet of code: <todo-item v-for="(todo, index) in todos" :key="todo.id" :todo="todo" :index="index"> </todo-item> This piece simply loops through the todos array, retrieves each todo obj ...

javascripthtmlvue.jsvuejs2vue-component

I am unsure about the process for submitting multiple tag inputs

I stumbled upon a YouTube tutorial that guided me on creating a multiple tag input field, but I hit a roadblock when trying to save the inputs (as JSON) to my Django models. Since I am relatively new to JavaScript, I'm at a loss on how to proceed. My ...

javascripthtmljqueryajaxforms

A different approach to achieving a newspaper-like text justification in HTML

When I have a paragraph with text-align:justify, the spacing between words can become uneven due to certain words. I used to rely on the property text-justify:newspaper; which helped break up the words for more evenly spaced text, but unfortunately, it is ...

htmlcss

Mobile responsiveness issue with menu not functioning as expected

I'm completely new to the world of responsive design with CSS. I recently created a responsive menu that works perfectly when I resize the browser window on my computer. However, when I try to access the site on my phone, the menu is just zoomed out a ...

jqueryhtmlcssresponsive

Tips for aligning two canvases with different heights at the top in HTML5

My problem involves two canvases housed within a single <div>. Despite their different heights, they are currently aligned at the bottom. +-------+ + + +-------+ + + + + + + +-------+ +-------+ Is the ...

csshtml

Navigating to a different page using JavaScript

Here is the code snippet I am working with: <p> <img alt="" src="imagini/slide1.png" style="height: 64px; width: 64px" id="imgClickAndChange" onclick="changeImage()" /> </p> <script language="javascript"> f ...

javascriptphpjqueryhtml

The menu lacks responsiveness

I'm looking to create a responsive menu on my website where the button that opens the navigation will be hidden in "desktop mode". I came across some information on w3school, but I seem to have made an error. Can you assist me with this, please? Thank ...

javascripthtmlcssmenunav

Learn the trick to making specific words appear bold in Select2 by changing the font style

I'm currently working with select2 version 4.0.1, and I have a requirement to modify the font for specific words. In particular, I want to display codes AK and HI in a different/bolder font style, similar to the example below: <select id="select2" ...

jquerycsshtmljquery-select2

Ajax does not seem to be functioning properly with the hide feature

Although I may not be well-versed in HTML, AJAX, or JavaScript, I found myself in a situation where I needed to develop a script. The issue I am facing is that the "hide" function is not functioning properly in my AJAX code. Specifically, I have two text f ...

javascripthtmlajaxhide

Ways to apply CSS class styles when a button is clicked in Angular

How can I create a button that toggles between light and dark mode when clicked, changing the background color and font color accordingly? I need to add CSS classes .bgdark and .textlight to the 'mainbody' for dark mode. HTML <div cla ...

cssangulartypescriptbuttonbootstrap-4

Changing the appearance of an element on the Navbar when it is being

Dealing with a specific style of search called macstyle can be quite convenient, but it becomes frustrating when combined with a dropdown menu. The issue arises when the search is in focus and then the dropdown menu is clicked, causing the transition to sh ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to incorporate a unique font into text using CSS?

Similar Question: How do I implement custom fonts in CSS? Is there a way to use CSS to define a custom font for elements like a <div>? I've heard about using @font-face ... but it doesn't seem to be effective in IE or Chrome. ...

htmlcssfonts

Utilizing Jquery Effectively to Dynamically Alter Images Based on Ids

HTML Section <div class="features-section"> <div class="container"> <div class="row"> <div class="feat-heading text-center"> <h3>Features</h3> ...

jqueryhtmlimagecsshover

Adjust the dimensions of the icon

My current project involves creating a sidebar with icons and associated text to represent each icon. However, I encountered an issue while trying to adjust the size of the icons within the sidebar using the "useStyles()" method. For some reason, the size ...

cssreactjsmaterial-ui

Retrieving the information verified in the database

public function actionEditmul($id) { $sql1="SELECT * FROM category_product INNER JOIN category ON category_product.cat_id=category.cat_id WHERE category_product.product_id=$id"; $editcat=Yii::$app->db->createCommand($sql1)->quer ...

phphtmlyii

The div does not allow elements to be centered

I am facing an issue where elements are not centering on my div. I have tried numerous solutions (so many that I finally decided to create a Stack Overflow account), but nothing seems to work. Interestingly, the elements center on PC but for some reason, ...

htmlcss