Achieving Vertical Center Alignment in CSS for Dynamic Div Elements

Question

Achieving Vertical Center Alignment in CSS for Dynamic Div Elements

I am currently working on vertically centering a div called container. It was successfully centered, but now I am using jQuery to add more divs to it like so:

$("#add").on("click", function () {
    $(".elements").append("<div class='element'>World</div>");
});

If you want to see the issue in action, check out this JSFiddle: http://jsfiddle.net/CDk4E/

Here's the problem I am facing:

Initially, when no divs are added, everything looks fine (the page remains vertically centered). However, as soon as new divs are added, the .element div containing "Hello" moves to the top. Ideally, I would like it to stay in its original position and just have new .element divs added to the bottom.

EDIT: Additionally, the size of the first element is constant.

javascript jquery css html

Answer 1

Answer №1

Consider adding padding:50%; to the CSS rule for your .container element

<style>
    html, body {
    height: 100%;
}
.wrapper {
    height: 100%;
    width: 500px;
    margin:0 auto;
    display: table;
}
.container {
    display: table-cell;
    height: 100%;
    padding-top:50%;
    border:1px red dashed;
    position:relative;
}

.element{
    background:purple;
    color:#FFF;
    width:100%;
    padding:10px;
}

</style>

Check out the result here: http://jsfiddle.net/CDk4E/2/

Answer 2

Consider adding padding:50%; to the CSS rule for your .container element

<style>
    html, body {
    height: 100%;
}
.wrapper {
    height: 100%;
    width: 500px;
    margin:0 auto;
    display: table;
}
.container {
    display: table-cell;
    height: 100%;
    padding-top:50%;
    border:1px red dashed;
    position:relative;
}

.element{
    background:purple;
    color:#FFF;
    width:100%;
    padding:10px;
}

</style>

Check out the result here: http://jsfiddle.net/CDk4E/2/

Achieving Vertical Center Alignment in CSS for Dynamic Div Elements

Answer №1

Similar questions

Using jQuery to Extract Content from Frames (excluding iframes)

We could not locate the requested resource with a DELETE request using the fetch JSON method

Elevated structuring: Encompassing ngRepeated elements within Angular.js

Using a Get request may not retrieve the most recent data that was added through a Post request

MongoDB failing to display Mongoose model fields

Switching from PHP to JavaScript before returning to PHP to establish and manage sessions

Tips for creating a mobile-friendly responsive table

The regular expression should consist of just letters and a single dot

"Error occurs when attempting to insert indexes into a JSON array, causing the Dat

The Jquery Datepicker U.I is malfunctioning and does not register selected values when the user only picks

"Learn the trick to easily switch between showing and hiding passwords for multiple fields in a React application

What is the best way to align text above a wrapper box?

Guide on displaying an element depending on the chosen value from a dropdown list using AngularJS

What are some ways to improve the performance of my CSS and HTML webpage?

Using PHP, jQuery, and Ajax to submit a form and display results on the same page

Save the XML file and input the value (XMLHttpRequest is unable to load the file) - On the Client Side

Combining multiple API requests using NodeJS

Sending data with AJAX to an ASMX web service

Trouble with jsFiddle: jQuery not functioning properly despite identical code

Passing a variable from a jQuery function to a submitted form: the ultimate guide