How To Center Align A Child Div Inside A Parent Div With Css?

January 15, 2024 Post a Comment

i am new to html and css and i couldn't figure out how to center align child div inside parent div.This is my code please answer and solve my problem. CSS .page { position:relative

Solution 1:

First of all there is nothing called float:center;, float has only 3 valid values which are none, left and right.

Inorder to center any element you need to define some width first and than use margin: auto; to center it horizontally.

Demo

The other way to center an element is to use text-align: center; on the parent element, but this is a dirty way to do so.

You can also use CSS positioning techniques like nesting a absolute element inside a relative positioned element, and than we center it by using left: 50%; and than we deduct 1/2 of the total width of the element by using margin-left: -100px; (total element width say is 200px). You can also center the element vertically.

The other way to have an element centered vertically as well as horizontally is to use display: table-cell; property along with vertical-align: middle;

Demo

Solution 2:

to center horizontally

.page
{
position:relative;
width:1220px;
height:670px;
background-image:url('/Users/raghunath/Documents/raghu personel/page07.png');
}
.window
{
position:relative;
width:367px;
height:202px;
background-color:#c6c6c6;
margin:auto;
}

To center vertically and horizontally both

Baca Juga

.page
{
position:relative;
width:1220px;
height:670px;
background-image:url('/Users/raghunath/Documents/raghu personel/page07.png');
}
.window
{
position:relative;
top:50%;
left:50%;
width:367px;
height:202px;
background-color:#c6c6c6;
margin-left:-183px;
margin-top:-101px;
}

Solution 3:

Please check here:

.page
{
  position:relative;
  width:1220px;
  height:670px;
  background-image:url('/Users/raghunath/Documents/raghu personel/page07.png');
}
.window
{
  width:367px;
  height:202px;
  background-color:#c6c6c6;
  margin:0px auto;  /* to align center horizontally*/
}

Solution 4:

Try this,

.window
{
    width:367px;
    height:202px;
    background-color:#c6c6c6;
    margin: auto 0px; /* For center. Apply same to page class*/
}

This may work.

Solution 5:

Your "window" div is CORRECTLY centered within the "page" div.

Your problem is that the page div is not centered within <html></html>.

To achieve this add the following code:

.page
{
...
margin-left:auto;
margin-right:auto;
}

Html5 Manual