HOT
22bulbjungle
No Result
View All Result
22bulbjungle
No Result
View All Result
Home Web Development CSS

How To Center A Div Inside A Div Easily

in CSS, Web Development
Reading Time: 2 mins read
529 6
0
how-to-center-a-div-inside-a-div-tutorial
735
SHARES
3.3k
VIEWS
Share on FacebookShare on Twitter

Why do we center a div inside a div element? Notice most of any website’s main content block always on the middle or a picture perfectly aligned on the middle.

There are a lot of ways to center a div inside a div. In this tutorial, I am going to show you two different ways to center a div element inside another.

RelatedPosts

How To Create a Beating Heart Shape Animation Using CSS

How To Transition a Height of Zero to a Height of Auto?

How To Apply CSS to Half of a Character


These two videos might help you.

See also:  Center Align Texts in Vertical Position
Continue reading below if you don’t want to watch the video.

Margin to center a div

Make the margin of the child div (the div inside the div) set to zero and auto.

.child-div{
margin: 0 auto;
}

 

Notice the code above we have set the first value to zero. The zero value is the margin from the top and also from the bottom of the div. In the second value, we have not set a numeric value but an auto which makes the div go in the middle horizontally. It is the margin from left and right of the div.

Note: Make sure to set a width in your child and parent div for this to work. The parent div should have a greater width obviously.

Text Align to center a div

.parent-div{
text-align: center;
}

Telling the parent div to make its child’s text elements to center also makes the child div to center horizontally. As a result the texts inside our child div are also centered. Therefore, the last thing we need to do is to keep the text aligned to the left.

The solution, we should target the child div and add a CSS style but this time text alignment to the left or wherever you prefer.

how to center a div inside a div

 

.child-div{
text-align:left;
}

See more amazing CSS videos on youtube: Garnatti one

In conclusion, the two CSS styling techniques are both great methods to use to align a child div element in the middle. The margin attribute is better than the other since it will make your code lesser and simpler.

Tags: CSSMarginText-alignTutorial
Share294Tweet184Share74

Related Posts

How To Create a Beating Heart Shape Animation Using CSS
CSS

How To Create a Beating Heart Shape Animation Using CSS

by 22bulbjungle
December 28, 2022
0

Create the HTML structure Create the HTML structure for the heart shape. We'll use a div element with the class "heart": <div...

Read more
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
Electronics, Smartphone, Computer & Tablet Repair Kit
How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
How To Prevent or Disable Copy and Paste in an Input Field

How To Prevent or Disable Copy and Paste in an Input Field

December 21, 2022
How To Turn Image Into Vintage With CSS

How To Turn Image Into Vintage With CSS

December 21, 2022

Free Do it yourself tutorials on CSS, HTML, Photoshop, Wordpress, and Woocommerce to help you learn web development and graphic design.

Follow Us

Affiliate Disclosure: 22bulbjungle is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.

Recent Tutorials

How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022

Categories

  • CSS
  • Duda Builder
  • Ecommerce
  • Elementor
  • Graphic Design
  • htaccess
  • Javascript
  • jQuery
  • PC Tips
  • Photoshop
  • PHP
  • Responsive design
  • Shopify
  • Video
  • Web Design
  • Web Development
  • Webdev Tips
  • Woocommerce
  • Wordpress
  • Home
  • Blog
  • Web Development
  • Graphic Design

© 2022 22BulbJungle.

No Result
View All Result
  • Home
  • Blog
  • Web Development
    • CSS
    • Javascript
    • WordPress
  • Graphic Design
    • Photoshop

© 2022 22BulbJungle.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.