<div> <h3>'This is a div of the web page.>/h3> <p>This is some text in a div element.</p> </div>
To get a wide aspect of the div tag usage and its implementation in HTML click here.
Example: This example describes how we can place a div inside another div.
As we can see the inner div container occupied the leftward portion of the inner space. To move the inner div container to the centre of the parent div we have to use the margin property of style attribute. We can adjust the space around any HTML element by this margin property just by providing desired values to it.
Now here comes the role of this property in adjusting the inner div. If the margin value is set to 0 i.e., margin : 0, it tells the browser that the top and bottom margin of the HTML element (here inner div) will be 0. Further, if we write the value of margin as margin : 0 auto, it commands the browser to automatically adjust the left and right margin to the same size according to the width of the HTML element.
Syntax of inner div:
<div style="width:50%;margin:0 auto"> <!-- content of div container --> </div>
Example: This example describes how we can center a div inside a div.
You can also provide any value to the first parameter to the margin value to provide some gap from the top and bottom to the HTML element. To adjust the inner div to the center position it is only necessary to write auto in the second parameter.
Syntax of inner div:
<div style="width:50%;margin:10px auto"> <!-- content of div container --> </div>
Example: This example shows how to center a div inside a div with having non zero value for the first parameter of the margin property.
Example: This example describes how we can place 2 div side by side with each div having a center aligned div within itself.
- Differences between HTML <center> Tag and CSS "text-align: center;" Property
- How to horizontally center a div using CSS?
- HTML | center Tag
- p5.js | center() Function
- How to vertically center text with CSS?
- How to Align <legend> Tag Text to Center ?
- How to make elements float to center?
- How to center a popup window on screen?
- How to center absolutely positioned element in div using CSS ?
- How to Align Navbar Items to Center using Bootstrap 4 ?
- How to Align modal content box to center of any screen?
- How place a checkbox into the center of a table cell?
- How to vertically and horizontally align flexbox to center ?
- How to target all Font Awesome icons and align them center?
- Center element of matrix equals sums of half diagonals
- Graph measurements: length, distance, diameter, eccentricity, radius, center
- How to make an image center-aligned (vertically & horizontally) inside a bigger div using CSS?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.