Aligning a div in the middle of an absolutely positioned div vertically

Question

Aligning a div in the middle of an absolutely positioned div vertically

Currently, I am facing an issue with the layout of my website's main body content section. There is a specific element positioned absolutely towards the bottom, with some space between it and the footer.

I have tried various approaches and exhausted my ideas to vertically center another part of the body content between this bottom absolutely positioned element and the top of the screen (which, in this case, refers to the top of the body section due to the presence of a header).

The challenge arises when attempting to use the vertical-align method with table cells, as the height: 100% option does not align the content between the header and the absolutely positioned bottom element above the footer.

For reference, here is a demo link for further context:

Considering that this is a responsive website design, there could be two potential heights for the bottom absolute row. Is achieving this using CSS alone feasible, or would JavaScript intervention be necessary?

javascript jquery html css

Answer 1

Answer №1

To vertically center elements, you can utilize the transform: translate property.

Start by giving the element a position of either absolute or relative, and then move it down 50% of its parent's height using top: 50%. Here's an example:

.vertical-align {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}

Now, the top of the element .vertical-align will be centered within its parent. The next step is to adjust it up by 50% of its own height. This adjustment can be achieved with javascript or simply using transform: translateY(-50%).

.vertical-align {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;

  transform: translateY(-50%);
}

Check out how this works in action with this pen: http://codepen.io/anon/pen/Ckyvz

For information on browser support for 3d transforms, visit: http://caniuse.com/#feat=transforms3d

Don't forget to add vendor prefixes to the transform property depending on browser requirements.

Enjoy experimenting!

Answer 2

To vertically center elements, you can utilize the transform: translate property.

Start by giving the element a position of either absolute or relative, and then move it down 50% of its parent's height using top: 50%. Here's an example:

.vertical-align {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}

Now, the top of the element .vertical-align will be centered within its parent. The next step is to adjust it up by 50% of its own height. This adjustment can be achieved with javascript or simply using transform: translateY(-50%).

.vertical-align {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;

  transform: translateY(-50%);
}

Check out how this works in action with this pen: http://codepen.io/anon/pen/Ckyvz

For information on browser support for 3d transforms, visit: http://caniuse.com/#feat=transforms3d

Don't forget to add vendor prefixes to the transform property depending on browser requirements.

Enjoy experimenting!

Answer 3

Answer №2

Implement the calc(); function in your CSS code.

.center_div{
    height:calc(100% - 200px);
}

This calculation is based on the assumption that the absolute div has a height of 200px.

Answer 4

Implement the calc(); function in your CSS code.

.center_div{
    height:calc(100% - 200px);
}

This calculation is based on the assumption that the absolute div has a height of 200px.

Answer 5

Answer №3

To center an element, you can use the following method:

element{
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    width:100px;
    height:100px;
    margin:auto;
}

This code snippet is for vertical alignment to the center.

element{
    position: absolute;
    top:0;
    bottom:0;
    height:100px;
    margin:auto 0;
}

Answer 6

To center an element, you can use the following method:

element{
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    width:100px;
    height:100px;
    margin:auto;
}

This code snippet is for vertical alignment to the center.

element{
    position: absolute;
    top:0;
    bottom:0;
    height:100px;
    margin:auto 0;
}

Aligning a div in the middle of an absolutely positioned div vertically

Answer №1

Answer №2

Answer №3

Similar questions

Custom date formatting with jQuery table sorting

Are there differences in alignment?

What is the best way to convert a string to JSON format using Javascript?

Mysterious JQuery attribute

Discovering the technique to dynamically load various content using jQuery in a div based on its

How can I retrieve the URL of images listed in my CSS file using Python?

Clear previously filtered items

Unable to insert text using selenium into a field that contains an angular 2 directive

Is it possible to achieve the expected outcome at the end of an arrow function without using the filter method?

Using a single AJAX function to write on various tags

Managing errors in React Router on the server-side

Tips for updating a table using jquery

Tips for updating the color of carousel image slider indicators (arrows) specifically for the second slide

Do we need to have the 'input type file' field as

Utilize Vuex's $store.watch method to dynamically add and remove event listeners

What could be the reason for a particular product edit page showing up completely blank?

Preventing Multiple Form Resubmissions in PHP

Troubleshooting problem with JQuery autocomplete display

Revamping an npm package on GitHub

Implemented a solution to ensure the menubar remains fixed when zooming in and out