Align a nested DIV in the center of the page both vertically and horizontally

Similar Question:
Best way to center a <div> on a page vertically and horizontally?

On my website landing page, the Container DIV occupies 100% of the Height and Width. While I have successfully centered the InnerContainer horizontally, I am facing difficulties in aligning it vertically. I have tried adjusting various properties with little success.

I have created a similar example on http://jsfiddle.net/cwkzq/12/ but I can't seem to pinpoint where I am going wrong. Any assistance would be greatly appreciated.

CSS Code

html, body,form { height: 100%;  }
body { margin: 0;  padding: 0; border: 1; background-color:Aqua; }
.Container { width: 100%;height: 100%; padding: 0; font-size: 12px; border:1px solid green;
vertical-align: middle;     }
.InnerContainer
{  vertical-align: middle; width: 400px;height: 350px; border-left:1px solid;
border-right:1px solid; border-color:#f5f5f5;margin: 0 auto;  padding: 0;
font-size: 12px;  background-color:Red;
}

HTML CODE

<!--  Container    -->
<div class="Container">
<div class="InnerContainer">
    <!--  TopMenu Bar    -->
    <div class="colorBar">

    </div>
    <!--  TopMenu Bar   -->
    <!--  Middle Part    -->
    <div class="MiddleWrapper">
        <!--  Left Title    -->
            <div class="Title">

            </div>
        <!--   Left Title   -->
        <!--   Large Image   -->
            <div class="ImageLeftWrapper">

            </div>
        <!--   Large Image   -->
        <!--  Logo Wrapper    -->
            <div class="LogoWrapper">

            </div>
        <!--   Logo Wrapper   -->
        <!--   Page Text Area  -->
            <div class="PageText">

            </div>
        <!--   Page Text Area   -->
        <!--  Search Bar    -->
            <div class="SearchBar">

            </div>
        <!--   Search Bar    -->
        <!--   Banner Images -->
            <div class="BannerImageWrapper">

            </div>
        <!--  Banner Images   -->
    </div>
    <!--  Middle Part    -->
    <!--   Menu Wrapper    -->
    <div class="MenuWrapper">

    </div>
    <!--   Menu Wrapper    -->
    <!--   Footer Section  -->
    <div class="FooterWrapper">

    </div>
    <!--  Footer Section  -->
</div>
</div>
<!--  Container   -->

In most examples online, the Container DIV has a fixed width and height, whereas in my case, it is set to 100% width and height.

htmlcss

Answer №1

Check out the solution here that has been moved to the original question

Successfully achieved it: (view demo on dabblet.com)

The key technique demonstrated in this example is utilizing the margin-top: auto property to center the element vertically within the specified constraints without affecting the normal flow of elements (except in IE7).

This method can be applied to div elements of any size.

HTML:

<div></div>

CSS:

div {
    width: 100px;
    height: 100px;
    background-color: red;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
}

Answer №2

If you have the precise dimensions of the block you wish to align, the simplest method is to follow this tutorial: jsfiddle

Implement the following CSS style in your .InnerContainer

.InnerContainer{
  width: 300px;
  height: 250px;
  border-left: 2px solid;
  border-right: 2px solid;
  border-color: #eaeaea;
  margin: 0 auto;
  padding: 0;
  font-size: 14px;
  background-color: blue;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -125px;
}

Answer №3

Hey there, now you have access to various methods of implementing this solution:

Using CSS

.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}

.wraptocenter {
    display: block;
    background: green;
    height: 500px;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
.child{
    background: pink;
    min-height: 100px;
    width: 100px;
    display: inline-block;
}

In HTML

<div class="wraptocenter">
    <span></span>
    <div class="child"> Hello, I am a child and I am vertically and horizontally centered.</div>
</div>

Check out the live demo here

For more information, visit this link

If you wish to Center align horizontally and vertically

CSS

.chv{
    width: 200px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -50px;
    border: solid 1px red;
}

HTML

<div class="chv">
    Center horizontally and vertically aligned content
</div>

See the demo in action here

If you want to Center horizontally and vertically a single line of text

CSS

.alldiv{
    width: 400px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    border: solid 1px red;
}

HTML

<div class="alldiv">
Center horizontally and vertically align a single line of text
</div>

View the live demo here

If you're looking to Center horizontally and vertically align using table properties, consider the following:

CSS

.parent{
    display: table;
    height: 300px;
    text-align: center;
    border: solid 1px red;
    width: 100%;
}
.child{
    display: table-cell;
    vertical-align: middle;
    border: solid 1px green;
}

HTML

<div class="parent">
    <div class="child">
    Center horizontally and vertically aligned content
    </div>
</div>

Experience the demo live here

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

Calculator built with HTML, CSS, and JavaScript

Hi there, I'm experiencing some issues with my calculator. The buttons seem to be working fine and lining up correctly, but for some reason, nothing is showing up on the monitor or getting calculated when I press the buttons. Here's the code that ...

javascripthtmlcss

Issues with dynamically adding or removing scroll in jQuery are not being resolved

I am trying to implement a dynamic scrolling feature in my post scenario. The goal is to automatically add a vertical scroll when the number of dynamic inputs reaches a certain threshold. Specifically, if there are more than 5 dynamic inputs created, a ver ...

javascriptjqueryhtmlcss

Display a modal upon successful validation of a form

As a newcomer to JavaScript and Bootstrap, I have a specific requirement: 1. When a user clicks the submit button, 2. The form needs to be validated using the entry_check() function. 3. Upon successful validation of the form, a Bootstrap modal should be op ...

javascriptjqueryhtmlformstwitter-bootstrap

Utilize conditional styling along with hover effects in ReactJS

I'm facing an issue where I need to set up a conditional style and a hover effect for TableRows. They work fine individually, but when combined, the hover function stops working. CSS const StyledTableRow = withStyles((theme) => ({ root: { tab ...

cssreactjswebstormjsx

What is the best way to vertically align a Material UI component to occupy the remaining space within a container

Issue with Material UI/Grids for Login Page As a newcomer to Material UI/Grids, I am currently working on creating a login page where the layout is split into two parts. The left side occupies 5 column spaces while the right side takes up 7 column spaces. ...

cssreactjsmaterial-ui

There is an irritating 5px gap between the divs in the Avada WordPress theme. While using margin-top: -5px helps to reduce this spacing, padding-top: -5

Struggling to remove a persistent 5px whitespace on my website eternalminerals.com See the issue highlighted in this screenshot: Trying to eliminate the whitespace by adjusting margins in Google Chrome, but unable to apply styles to Avada shortcodes: &l ...

htmlcsslayoutwordpress

Javascript functions fail to execute as intended

I have a project called calc, which includes various functions such as init. Within this project, there are three buttons that I am adding to the div using jquery. When a user clicks on any of these buttons, it should trigger the inputs function. Based on ...

javascriptjqueryhtml

Looking to Identify a Click Within a Complicated Component and Retrieve the Component's ID

Currently, I am working with React for development and have a need to capture clicks at the topmost parent level for performance reasons. const clickHandler = (e) => { console.log("clickHandler", e.target) --> I want to identify the child ...

javascripthtmlreactjs

Explore nearby directories by utilizing the HTML file API in conjunction with JavaScript

Exploring the idea of developing an application that utilizes the HTML5 file API and JavaScript to accept a directory path as user input, allowing for the processing (text search) of all files within that directory and its subdirectories. Instead of my cu ...

javascripthtml

Floating CSS3 animations within HTML elements

I'm struggling to understand why the animated arrow on my website refuses to go behind the other elements. The animation code I've used for the arrow in CSS3 is as follows: -webkit-animation-fill-mode:both; -moz-animation-fill-mode:both; -ms-an ...

htmlcsscss-animations

What is the best way to find the longest element with the same class name using jQuery?

How can I dynamically find elements with the same length of class names? var className = $('.floor-4').attr('class').split(' ')[1]; var classLength = $('.' + className).length; Here is the HTML code: <div id="d ...

javascriptjqueryhtmlcss

Performing an AJAX request inside of another AJAX request

I have integrated buttons into my website that are activated by JS AJAX loads. By clicking on these buttons, a JavaScript function is executed to load the contents of a PHP file into a specific div element. This setup is crucial as I want to avoid the enti ...

phpjavascripthtmlajax

Ways to increase the spacing between several menus

Need help with spacing between menus Tried using margin left and margin right but it's not working File: _Layout.cshtml <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport&quo ...

htmlcssasp.net-mvcbootstrap-4

An easy way to attach a Contextmenu to a specific element

I have implemented a scrolling feature for one of the div elements in my Application. Inside this div, there is a templated table with over 100 rows. Users are able to add or delete rows using a contextMenu. The contextMenu offers 4 options - AddTop, AddB ...

javascripthtmlcss

Is there a way to adjust the height pixel value in my code so it can be dynamic?

I have created a simple script that allows selected objects to fade in as the user scrolls down. However, my issue is that this script is quite rigid. If I were to apply it to 20 different objects, for example, I would need to manually adjust the height ea ...

javascriptjqueryhtmlcssweb

Creating aesthetically pleasing and flexible rows with left-floated div elements of varying heights

I need to arrange a series of elements in rows that look like tables, with fixed width but variable height determined by the content. Each element is set to float left and have the same width value. The issue I'm facing is that sometimes the elements ...

htmljquerycsscss-float

CSS deep level selectors

For the following HTML/CSS code, I am trying to target only level 1 "row" elements and not their nested counterparts. However, when using the child selector, it still selects the nested elements. How can I achieve selecting only level 1 "row" elements? ...

htmlcsscss-selectors

Strange Vertical Offset Issue with Custom Fonts in CSS

I have implemented a custom font in my CSS using the following method: @font-face { font-family: 'Gabriola'; src: url('Gabriola.eot'); src: url('Gabriola.eot?#iefix') format('embedded-opentype'), ...

csscross-browserfont-face

Can anyone provide a solution for the issue with bootstrap utilities?

Currently, I am using Vue3 with Vite and attempting to integrate Bootstrap into my project. While I have managed to implement most of it successfully, I encountered a significant error when trying to override Bootstrap-related variables. Can anyone offer a ...

cssvue.jssassvuejs3bootstrap-5

Using a JQuery variable to display a div using the .show() method

I am attempting to use the .show() method to reveal div elements in a slideshow-like manner. My goal is to utilize the ID of a button on my navigation bar to trigger the display of a specific slide similar to how a slideshow operates. For example, if butt ...

jqueryhtml