How to center a div within another div using HTML and CSS

Sharing buttons:


hello everyone welcome to the heart talk

and in this video I will show you how

you can align any element to the center

of screen

so in this doodle I will show you two

methods so let's start with method 1 so

guys if you haven't subscribed my

channel please go to my channel and

click on the subscribe button and also

click on this Bell icon to get a future

notification whenever I upload any new

video so let's get started so for this

project I have created a 1 index file

and one CSS file and index file I am

going to add one development and here I

will provide a class as parent and

inside this parent deal I will again

provide one more div and I will provide

class as child let's apply some CSS to

this parent class so in CSS file I will

write dot parent and I will provide

width around 600 pixel and the height

around 400 pixel let's provide border

around 5 pixel solid and black color

let's just check ok so they just reduce

width fine so now we will provide CSS to

child class so inside our parent class

we have child div so here I will provide

width around 100 pixel and height same

as hundred pixel and here I will provide

background color as let's provide light

C cream

okay so just refresh okay so you here

you can see we have added one div

container inside our parent div

container so now we will position this

green div tag to the center of this

black development so here I will provide

position as

relative and here I will provide

position as absolute now when we change

top and left property of this child

element it will be relative to its

parent element so here I will provide

left as zero top as zero bottom as zero

and write as zero and let's provide

margin Auto okay so here you can see the

child element is perfectly Center

aligned to its parent element so this is

method 1 so let's discuss method 2 so

for method 2 I will just remove this

part and ok so here we need position as

related so I will keep this property the

legislature now what I will do I will

make left as 50 percent top as 50

percent so let's just check what we need

to make position as relative here you

can either define relative via absolute

property so here you can see I have

moved my child element 50 percent in x

axis and 50 percent in y axis so here

you can see this point is a center of

this parent container so what we need to

do we need to again move this child

element in negative y direction and

negative x direction by 50 percent so

for that we will use transform property

so here I will write transform and here

I will use translate and I will move it

in negative x-axis by 50 percent and

negative Y axis by 50 percent so let's

just check so here you can see using

method two we have Center aligned our

child element so that's it for this

tutorial I hope guys you like my video

and if you guys have any doubt please

comment below

and please don't forget to like share

and subscribe my channel thank you