Vertically centering a div inside another div

Question

Vertically centering a div inside another div

I want to center a div which is added inside another div.

<div id="outerDiv">

    <div id="innerDiv">

    </div>

</div>

This is the CSS I am currently using.

#outerDiv{

        width: 500px;

        height: 500px;

        position:relative;

    }

    

    #innerDiv{

        width: 284px;

        height: 290px;

        position:absolute;

        top: 50%;

        left:50%;

        margin-top: -147px;

        margin-left: -144px;

    }

As you can see, the approach I use now depends on values for width and height of innerDiv. If the width/height changes, I will have to modify the margin-top and margin-left values. Is there any generic solution that I can use to center the innerDiv independently of its size?

I figured out that using margin:auto can horizontally align the innerDiv to the middle. But what about vertical align middle?

css html

4 years ago by Bharatgxwzm

3 Answers

Login / Signup to Answer the Question.

Login Signup

**akshay1995** · Answer 1 · 2021-07-28T13:31:20

Another way of achieving this horizontal and vertical centering is:



.Absolute-Center {

  margin: auto;

  position: absolute;

  top: 0; left: 0; bottom: 0; right: 0;

}

**pankajshivnani123** · Answer 2 · 2021-07-30T04:16:57

Instead of tying myself in a knot with hard-to-write and hard-to-maintain CSS (that also needs careful cross-browser validation!) I find it far better to give up on CSS and use instead wonderfully simple HTML 1.0:



<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">

    <tr>

        <td valign="middle" id="innerDiv">

        </td>

    </tr>

</table>

This accomplishes everything the original poster wanted, and is robust and maintainable.

**RoliMishra** · Answer 3 · 2021-08-03T12:08:31

When your height is not set (auto); you can give inner div some padding (top and bottom) to make it vertically center:

<div>

    <div style="padding-top:20px;padding-bottom:20px">

    <!--content-->

    </div>

</div>

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

Vertically centering a div inside another div

3 Answers

Login / Signup to Answer the Question.