skip to Main Content

What is a DIV?

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

Just as a brick is a building block of a wall, so a div is a “brick” in building a website.

DIV element is a container for all elements. More elements are inserted into it and all other elements can go into it.

 

How to position DIV on the site page?

We will introduce you to four different methods by which you can position the div element on the website page.

 

Method 1 – use “flex layout”

Flex layout is the fastest way to put multiple elements into one div.

 

.child-div {

display: flex;

justify-content: center;

align-items: center;

}

How to position DIV element?

Method 2 – margin auto

A quick and easy solution, but it has its limitations. Only for elements that have a defined width. Parent div must contain text-align: center ;. It must not have a fixed or absolute position.

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 car;

}

How to position DIV element?

Method 3 – a combination of text-align and inline-block

The difference between methods 2 and 3 is that width does not need to 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;

}

How to position DIV element?

Method 4 – 2D Transform

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

The div will be over all other elements (due to the absolute position). Width and height must also be defined.

 

.child-div {

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

background-size: 100%;

widht: 200px;

height: 200px;

border-radius: 50%;

position: absolute;

top: 50%;

left: 50%;

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

}

How to position DIV element?

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

How to position DIV element?