How to center in css | how to center a div inside a div

There are many ways to center any text or div or box in CSS. what we’re going to tell you about.

Normally, in HTML by default, the alignment of most of the elements is left. With the help of CSS, these alignments are changed when needed. To change these alignments, many properties like text-align, margin, padding, float, background-position, position and etc. are used. Here we will see how horizontal and vertical alignment is given for content in CSS.

CSS Alignment is Tutorial I have explained CSS Alignment completely with examples. Alignment means to move the position of an HTML element horizontally yes vertically. Remember if you have not read HTML Full Course and CSS Full Course and Python Full Course and PHP Full Course, then you can read that too.

Also Read: What is a CSS selector? | Different Types of CSS Selectors?

Also Read: Beautiful GridView Design Using Custom CSS In Asp.Net

What css alignment

Html Me mostly elements are left-aligned by default, but ham is able to change the alignment with the help of CSS properties and design the web page according to your need, for this CSS’s text-align, margin, padding, float, position, etc properties are used.

Center align elements in CSS

To center align a block element, we can use the margin: auto property

Note: When set margin: auto then one thing should be kept in mind that we have also set width for our element, and width should not be 100%.

Also Read: What is a CSS selector? | Different Types of CSS Selectors?

Also Read: Which CSS property controls the text size?

Ways to center a text, div, box using css?

Example 1 -using text align center

<style>
.left {
  text-align: left;
  border: 3px solid black;
  margin-bottom : 5px;
}
.center {
  text-align: center;
  border: 3px solid green;
  margin-bottom : 5px;
}
.right {
  text-align: right;
  border: 3px solid blue;
}
</style>

Example 2 -using Margin x auto

<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%";
}
</style>

Example 3 -using Linehight and vertical align

<style>
.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid red;
  text-align: center;
}

.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
</style>

Example 4 -using display flex property

<style>
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid red; 
}
</style>

Example 5 -using Margin x auto

<style>

.center{
 position:absolute;
 bottom:200px;
 left: 50%
;
 right: 50%;
 border:1px solid;
 background-color:green;
} 
</style>

Ways to center a text, div, box using HTML?

If you want to center any text or div in HTML then you have to use a class attribute of HTML for that in addition you can also use inline CSS for example

Also Read: What is flex in CSS? | Uses of the flex in CSS?

<!--Example 1 - Center text, div using HTML Class Attribute  -->

<div class="center">
  <p>Master Programing</p>
</div>


<!--Example 2 - Center text, div using Inline CSS  -->

<div style="text-align:center;">
  <p>Master Programing</p>
</div>

Also Read: What is flex in CSS? | Uses of the flex in CSS?