Methods for centering multiple position absolute child divs vertically:How to align the middles

Struggling to vertically align multiple position:absolute divs in the middle? Even with width and height set at 100%, they still overflow. Any solutions or suggestions would be greatly appreciated. Thank you!

<div class="wrapper">
  <div class="wrapper-inner>
    <div class="section-1">
      <h2>Title Here</h2>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="section-2">
      <p>More text here.</p>
      <p>And more.</p>
    </div>
  </div>
</div>

html,
body {
  width: 100%;
  height: 100%;
}
.wrapper {
  width: 100%;
  height: 100%;
}
.wrapper-inner {
  width: 100%;
  height: 100%;
  position: relative;
}
.section-1 {
  position: absolute;
  left: 20vw;
  width: 40vw;
  background: #ccc;
}
.section-2 {
  position: absolute;
  left: 60vw;
  background: #375642;
  width: 40vw;
}

View demo here

Can't seem to figure out how to center those content sections vertically on a full screen height without using top:50% and adjusting for height, which isn't ideal for responsiveness.

jqueryhtmlcsscenter

Answer №1

Consider utilizing CSS Positioning. For example:

.container {
  width: 100%;
  height: 100%;
  position: relative;
}
.container-inner {
  position: absolute;
  top: 50%;
  transform: translateY(-41px);
}

Check out the code snippet below:

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
}
.container-inner {
  position: absolute;
  top: 50%;
  transform: translateY(-41px);
}
.section-1 {
  position: absolute;
  left: 20vw;
  width: 40vw;
  background: #ccc;
}
.section-2 {
  position: absolute;
  left: 60vw;
  background: #375642;
  width: 40vw;
}
<div class="container">
  <div class="container-inner">
    <div class="section-1">
      <h2>Title Here</h2>
      <p>Some content here</p>
    </div>
    <div class="section-2">
      <p>Additional text here.</p>
      <p>Once again.</p>
    </div>
  </div>
</div>

I hope this information is beneficial!

Answer №2

To vertically center all classes that start with "section", use the following code:

CSS: 

div[class^='section-'], div[class*='section-']{
    position: absolute;
    left: 20vw;
    width: 40vw;
    background: #ccc;
    top: 50%;
    transform: translateY(-50%);
}

Simply add the top and transform values in percentages to achieve the desired result.

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

Enhancing ASP.NET MVC 5 Application with jQuery Validate: Implementing Submit Button Click Events

In the process of developing an ASP.NET MVC 5 application, I find myself faced with a dilemma. The current setup involves using the jQuery Validate plug-in that comes packaged with MVC applications. Upon clicking the "submit" button, jQuery Validate kicks ...

javascriptjqueryasp.net-mvcasp.net-mvc-5jquery-validate

Google App Engine does not properly interpret PHP code when making AJAX requests

I am currently facing an issue with using AJAX request on Google App Engine. In my local development environment, everything works fine and the request is correctly interpreted. However, when I deploy the code to production, the AJAX request renders the co ...

javascriptphpjqueryajaxgoogle-app-engine

Dynamically insert <td> elements into <tr> element using both jQuery and JavaScript

I am facing an issue with adding a new table data (td) element dynamically to the first table row (tr) in my JavaScript code. Here is the original table before adding the new td element: <table> <tbody> <tr> <t ...

javascripthtmljqueryangularjsjquery-ui

Set the height of the div element to be the same as its parent element (100

Within my main div, there are two child divs. I want the first child div to have the same height as the parent div, without specifying a height in CSS. For reference, take a look at this example: http://jsfiddle.net/x8dhnh4L/ The pink div should expand to ...

htmlcssheight

Tips for positioning two elements side by side in an li element without needing to clear each time

I'm struggling with a stacked list that involves floating an image (icon) alongside text. The constant need to clear after each list item is becoming cumbersome. Anyone have any suggestions for making this more streamlined and tidy? <ul> < ...

htmlcsscss-floathtml-lists

Tips for optimizing loading speed by implementing pagination with HTML, jQuery, PHP, and MySQL on the go

I currently have a table with over 1400 rows, adding approximately 20 new rows every day, which is causing my page to slow down. My current approach involves using a while loop to generate table rows and columns, along with some JavaScript like the exampl ...

phphtmlmysqlajax

Presentation for a div's background image with the use of jQuery

My header contains a large div with text contents and boxes, along with a background image. Now I want to create a slideshow for this div's background. Does anyone know how to make a slideshow for a div's background image? I've searched ex ...

javascriptjqueryhtmlbackgroundslideshow

The video is not extending to the full width of the container

Looking at the image I've attached, it's clear that the video is not covering the full width as desired. Can someone pinpoint where I'm making a mistake? Here is the image for reference: Image of the div and video Here's the snippet of ...

htmlcssvideofullscreen

Detecting click events in D3 for multiple SVG elements within a single webpage

My webpage includes two SVG images inserted using D3.js. I am able to add click events to the SVGs that are directly appended to the body. However, I have encountered an issue with another "floating" div positioned above the first SVG, where I append a dif ...

javascriptjquerycssd3.jssvg

Tips for displaying Facebook comments with JavaScript

Can anyone help me figure out how to customize the data-href for Facebook comments using JavaScript (jQuery)? I tried incorporating the code below, but it's not displaying anything in the div col2. $("#col2").html( id+"<div class='fb-comm ...

javascriptjqueryfacebookfacebook-comments

What causes certain images to have unspecified height and width measurements?

Currently, I am in the process of extracting image sizes from a website using a module called scraperjs. Most images have their height and width attributes defined, but some do not, resulting in the returned value being "undefined". How can I retrieve the ...

javascriptjqueryhtmlnode.jsimage

The refresh feature of DIV ceases to function once a new entry is added to

(UPDATE) After thorough investigation, I have identified the root cause of the issue, which is not related to the database entries or auto-refresh feature as previously assumed. The problem seems to be stemming from a function in my index.php file that det ...

phpjquerymysql

Identifying and handling the removal of a complete div element by the user

Is it possible to remove the entire div element if a user tries to inspect the web browser using the script provided below? <script type="text/javascript"> eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/, ...

javascripthtml

How can I create a placeholder in semantic-ui components?

I'm currently utilizing the plugin and facing an issue with displaying the placeholder. Although data retrieval from the database is functioning properly, the placeholder is not being shown. Note:- When I remove the PHP code, the placeholder display ...

javascriptphphtmlhtml-selectsemantic-ui

Having trouble setting a value as a variable? It seems like the selection process is not functioning properly

My Hangman game has different topics such as cities and animals. When a user selects a topic, the outcome should be a random item from that specific topic. For example: London for cities or Zebra for animals. Currently, I am only generating a random lett ...

javascripthtmlvariablesdomrandom

Conceal the div if it remains unhidden within the following 10 seconds

This piece of code is designed to show a loader image until the page finishes loading. Here is the code snippet: document.onreadystatechange = function () { var state = document.readyState if (state == 'interactive') { $('#unti ...

javascriptjqueryhtmlajax

"Enhancing user experience: dynamically adding rows using a combo of jquery, ajax, and php

This is the layout of my table. Here is the result I'm getting. Below is the code snippet: <table width="100%" id="controltable" border="1"> <tr> <th> Product Name </th> <th> Product Pri ...

javascriptphpjquerymysqlajax

Utilizing jQuery to retrieve the URL of a specific anchor element

Trying to traverse through the cells of a table where each cell is structured as follows: <td><a href="javascript:__doPostBack..." class="MyLink">1</a></td> I am attempting to extract the href's value from this structure, but ...

jquery

A pair of jQuery UI datepickers each configured with distinct settings

Check out this example here I am setting up 2 datepickers. <input type="text" class="datepicker" id="date_first_registration"> <input type="text" class="datepicker" id="inspection_valid_until"> For the first one, I want the date range to sta ...

jqueryjquery-uijquery-ui-datepicker

Error: An uncaught exception occurred when trying to access a seekable HTML5 audio element, resulting in an IndexSize

While trying to utilize the HTML5 API along with SoundManager2, I encountered an issue. My goal was to determine the duration of a song in order to create a progress bar that would update as the song played. However, every time I attempted to retrieve the ...

javascripthtmlflaskhtml5-audiosoundmanager2