What is DIV?

“HTML Content Division element” (< giant> ) is the building block of the web sides. In our text, learn four ways to position a div element on a website page.

Just as a brick is the building block of a wall, so div represents a “ brick” in the construction of web pages.

A div is a container for all elements. More is added to it div elements and all other elements can go inside it.

How to position a DIV on a site page?

We’ll present you with four different methods you can use to position a div element on a site station.

1st method – using ” flex layout “

Flex layout is the fastest way to fit multiple elements into a single div.

.child-div {

display:flex;

justify-content: center;

align-items: center;

}

2nd method – margin auto

A quick and simple solution, but it has its limitations. Only for elements that have a defined width. The parent div must contain text-align: center;. Ne sme da ima position fixed or absolute.

You can read more about positioning elements in CSS here.

We cannot use it for vertical alignment.

.child-div {

background: url(“logo.png”) no-repeat;

background-size: 100%;

width: 200px;

height: 200px;

border-radius: 50%;

margin: 0 auto;

}

3rd method – a combination of text-align and inline-block

The difference between the 2nd and 3rd methods is that width should not be defined. Also we can’t use vertical alignment here either.

.child-div {

background: url(“logo.png”) no-repeat;

background-size: 100%;

width: 200px;

height: 200px;

border-radius: 50%;

display: inline-block;

}

4th method – 2D Transform

Position, top and left and transform div will always be in the middle of the screen (horizontally and vertically).

Div will be over all other elements (due to absolute position). Width and height must be defined as well.

.child-div {

bacground: url(“logo.png”) no-repeat;

background-size: 100%;

width: 200px;

height: 200px;

border-radius: 50%;

position: absolute;

top: 50%;

left: 50%;

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

}

For more news and interesting stories from digital marketing, visit our blog page or follow our Instagram profile.