How to exact center align a child div inside a parent div with css using position?

Question

I need exact center align a child dive inside a parent dive using css position like (Relative and absolute). Please help me

There are probably at least a hundred questions on this topic on SO. — , Oct 17 '15 at 08:08

Fazil Abdulkhadar · Answer 1 · 2015-10-17T07:48:34.340

I try with following solution.

.parnt-div{
 width:500px;
 height:500px;
 background-color:rgba(197,6,10,1.00);
 position:relative;}
.chld-div{
 position:absolute;
 width:200px;
 height:200px;
 background-color:rgba(122,232,23,1.00);
 vertical-align: middle;
 margin: auto;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
}

<div class="parnt-div">
  <div class="chld-div">
       Child div
  </div>
</div>

Alexei Zababurin · Answer 2 · 2015-10-17T08:02:45.650

There are many ways to center the elements.

1 It is one of its (please open at full page):

#centerLayer {
     position: absolute;
     width: 40%; 
     height: 30%;
     left: 50%;
     top: 50%; 
     margin-left: -20%;
     margin-top: -15%; 
     background: #fc0;
    }

<div>
    <div id="centerLayer">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
      euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    </div>
</div>

2 Second approach:

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

<div >
  <div class="Absolute-Center">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis gravida enim, eu dignissim mauris elementum in. Sed laoreet enim a turpis lacinia condimentum. Nunc aliquam arcu vitae tortor aliquam, eget luctus metus elementum. In est quam,
      pretium id mi in, consequat posuere velit. Quisque sed nulla sed nisl malesuada facilisis. Mauris congue fermentum semper. Sed lobortis pretium dignissim. Aliquam lacinia, tellus in convallis convallis, leo tellus malesuada justo, et tincidunt felis
      ipsum egestas ex. Sed aliquet, eros vitae eleifend aliquam, diam nulla dictum magna, sed pharetra dolor risus ac lectus. Proin augue lectus, eleifend nec aliquam sed, molestie pulvinar massa. Aenean vel quam in purus dictum vulputate. Curabitur
      est tortor, convallis sit amet lacus sit amet, consequat maximus justo. Sed elementum, dolor non rhoncus vulputate, est eros pretium nulla, id egestas est risus vitae ipsum. Mauris tempor eget nulla tristique vulputate.
    </p>
  </div>
</div>

3 Third way:

#centerLayer {
     width: 400px; 
     background: #fc0; 
     padding: 10px; 
     text-align: left; 
    }

<div align="center">
    <div id="centerLayer">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
     nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    </div>
  </div>

4 Fourth:

   #centerLayer {
    margin-left: 30%; /* Left marging */
    width: calc(40% - 2 * 10px - 2 * 6px); /* Width of block  */
    background: #fc0; /* Background color */
    padding: 10px; /* Padding around text */
      border: 6px double white;
   }

<div >

  <div id="centerLayer">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
   nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
  
</div>

align: center has been deprecated. Don't use it. Also, please translate the Russian comments in the last snippet. — Bram Vanroy, Oct 17 '15 at 07:26

score 0 · Answer 3 · answered Oct 17 '15 at 07:27

0

HTML

<div id="parent">
    <div id="child" class="block center">a block to align center </div>
</div>
<br>

CSS

#parent {
    text-align:center;
    background-color:blue;
    height:400px;
    width:600px;
    position: relative;
}
.block {
    height:100px;
    width:200px;
    text-align:left;
    position: absolute;
}

answered Oct 17 '15 at 07:27

UX Mechanic

66
6

What if I don't know the dimensions of the parent or child? – Oct 17 '15 at 08:07

score 0 · Answer 4 · answered Oct 17 '15 at 07:33

The "old way": if you need IE8 support.

.parent {
  position: relative;
  width: 100%;
}
.child {
  position: absolute;
  left: 50%;
  margin-left: -40%; /* width/2 */
  width: 80%;
  background: yellow;
  padding: 1em;
}

<div class="parent">
  <div class="child">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis gravida enim, eu dignissim mauris elementum in. Sed laoreet enim a turpis lacinia condimentum. Nunc aliquam arcu vitae tortor aliquam, eget luctus metus elementum. In est quam,
      pretium id mi in, consequat posuere velit. Quisque sed nulla sed nisl malesuada facilisis. Mauris congue fermentum semper. Sed lobortis pretium dignissim. Aliquam lacinia, tellus in convallis convallis, leo tellus malesuada justo, et tincidunt felis
      ipsum egestas ex. Sed aliquet, eros vitae eleifend aliquam, diam nulla dictum magna, sed pharetra dolor risus ac lectus. Proin augue lectus, eleifend nec aliquam sed, molestie pulvinar massa. Aenean vel quam in purus dictum vulputate. Curabitur
      est tortor, convallis sit amet lacus sit amet, consequat maximus justo. Sed elementum, dolor non rhoncus vulputate, est eros pretium nulla, id egestas est risus vitae ipsum. Mauris tempor eget nulla tristique vulputate.
    </p>
  </div>
</div>

The new way: using translate. This method is easier to use because no matter what width you give to the child element, translateX(-50%) will always work. translate takes as its percentual value the width of the element as a reference, so no matter what the width of the element, -50% will always be half. Don't forget to add the necessary vendor prefixes.

.parent {
  position: relative;
  width: 100%;
}
.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  background: yellow;
  padding: 1em;
}

<div class="parent">
  <div class="child">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis gravida enim, eu dignissim mauris elementum in. Sed laoreet enim a turpis lacinia condimentum. Nunc aliquam arcu vitae tortor aliquam, eget luctus metus elementum. In est quam,
      pretium id mi in, consequat posuere velit. Quisque sed nulla sed nisl malesuada facilisis. Mauris congue fermentum semper. Sed lobortis pretium dignissim. Aliquam lacinia, tellus in convallis convallis, leo tellus malesuada justo, et tincidunt felis
      ipsum egestas ex. Sed aliquet, eros vitae eleifend aliquam, diam nulla dictum magna, sed pharetra dolor risus ac lectus. Proin augue lectus, eleifend nec aliquam sed, molestie pulvinar massa. Aenean vel quam in purus dictum vulputate. Curabitur
      est tortor, convallis sit amet lacus sit amet, consequat maximus justo. Sed elementum, dolor non rhoncus vulputate, est eros pretium nulla, id egestas est risus vitae ipsum. Mauris tempor eget nulla tristique vulputate.
    </p>
  </div>
</div>

Toni Michel Caubet · Answer 5 · 2015-10-17T18:07:13.307

0

I know it doesn't make use of position

but have you tryed with padding? As you don't know the height of the parent, this may be the easiest approach

.container {
     padding: 50px;
     background: yellow;
     text-align: center;
}
.container div {
     background: orange;
     padding: 10px 0 0;
     
}

<div class="container">
    <div>I am a div</div>
<div>

edited Oct 17 '15 at 18:07

answered Oct 17 '15 at 08:31

Toni Michel Caubet

19,333
56
202
378

manikandan gopal · Answer 6 · 2016-10-26T09:25:05.923

i think it will work exact center of parent and child div.

HTML:
<div class="parent">
<div class="child">
</div>
</div>

CSS:
.parent{
margin:auto;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border:1px solid red;
width:200px;
height:200px;
}

.child{
margin:auto;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border:1px solid black;
width:100px;
height:100px;  
}

https://jsfiddle.net/manigopal89/x263ongn/

score 0 · Answer 7 · answered Dec 02 '16 at 12:29

0

As per CSS3 you can use Flex box to align div's in any position and order and spacing between div's etc.

answered Dec 02 '16 at 12:29

Raghu Kumara Chari

166
1
2
9

How to exact center align a child div inside a parent div with css using position?

7 Answers7