#css #fron

tend

CSSda Divni Markazlash

Htm

l struktura:

<div class="container">

    <div class="centered-

div">Marlangan kontent

</div>

<;/div>



1?? Flexbox yordamida markazlash:

.container {

    display: flex;

    justify-

content: center;
lign-it

ems: center;

    height: 100vh;

}

2?? Grid yordamida markazlash:

.container 

{
display: grid;
lace-it

ems: center;

    height: 100vh;

}

3?? Absolyut yordamida markazlash:

.container {

    position: relative;

    height: 100vh;

}

.centered-div {

    position: absolute

;
top: 50%;
left: 5
t

ransform: translate(-50%, -50%);

}

4?? Margin Auto yordamida markazlash:

// Gorizontal markazlash

uchun, margin: auto
.centered-

 {

    width: 50%;

    margin: 0 auto;

}

5?? Inline-block bilan markazlash:

// Inline yoki inline-block elementlari uchun

.container {

    text-align: center;

    line-height: 100vh;

}

.centered-div {

   

display: inline-block;
vertical-align: middle;
line-height: normal;
}

@frontend