CSS | Центрирующие элементы
Опубликовано: 1 Марта, 2022
Иногда мы сталкиваемся с проблемами центрирования элемента на веб-странице. Неужели это так сложно? Центрировать элемент не так уж и сложно. Есть так много разных способов сделать это.
Единственное, что нам нужно знать, это то, какая техника для какой цели. Как только вы поймете проблему, подобрать лучшую технику станет намного проще.
So let us see some situation and discuss the best method to achieve the goal.
- Horizontally
- Inline elements
We can easily center an inline element within a block level element like this:// Aligning text in
center
.
center
{
text-align
:
center
;
}
- Block level elements
We can center a block-level element by giving it margin-left and margin-right of auto (which has a known specified width):// Aligning an element of defined length in
center
// Remember to define the width of the element otherwise it
//will be full width and
"auto"
will not work
.
center
{
margin
:
0
auto
;
width
:
200px
;
}
- More than one block level elements
If we have two or more block-level elements that need to be centered horizontally in a row, it can be better served making them a different display type display: inline-block;.parent
{
// Aligning the child of this parent in
center
text-align
:
center
;
}
.child
{
// set the display of child elements
display
: inline-
block
;
text-align
:
left
;
}
- Inline elements
- Vertically
- Inline elements
We can easily center an inline element within a block level element like this:// Set the display of the parent class as table
.parent
{
display
: table;
height
:
250px
;
background
:
white
;
width
:
240px
;
margin
:
20px
;
}
// Set the display of the child class as
table-cell
.child
{
display
:
table-cell
;
margin
:
0
;
background
:
black
;
color
:
white
;
padding
:
20px
;
border
:
10px
solid
white
;
vertical-align
:
middle
;
}
- Block level elements of known height
We can easily center an inline element within a block level element like this:// Set the position of the parent as relaive to other
.parent
{
position
:
relative
;
}
// Set position of the child as
absolute
in its parent class
// so that it can be placed anywhere in the parent class
.child
{
position
:
absolute
;
top
:
50%
;
height
:
100px
;
/* responsible for padding and border
if not using box-sizing: border-box; */
margin-top
:
-50px
;
}
Block level elements of unknown height
We can easily center an inline element within a block level element like this:// Set position of child as
absolute
in its parent class
.parent
{
position
:
relative
;
}
// Set
top
of the child
50%
of viewport
// Translat the child by
50%
of its height about
// negative y axis
.child
{
position
:
absolute
;
top
:
50%
;
transform: translateY(
-50%
);
}
- Inline elements
- Both Horizontally & Vertically
- Element with fixed height and width
Using negative margins equal to half of that width and height, after you’ve absolutely positioned it at 50% / 50% will center it.// Set position of parent class as
relative
.parent
{
position
:
relative
;
}
// Set
top
and
left
of an element of
// known height as
50%
.child
{
width
:
300px
;
height
:
100px
;
padding
:
20px
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
margin
:
-70px
0
0
-170px
;
}
- Element with unknown height and width
When we don’t know the width or height, we can use the transform property and a negative translate of 50% in both directions to center:// Set position of parent as
relative
to other
.parent
{
position
:
relative
;
}
// Set
top
and
left
of an element of
// known height as
50%
. Translate the
// element
50%
of its height and width
// about negative x-axis and negative y-axis
.child
{
position
:
absolute
;
top
:
50%
; //
left
:
50%
;
transform: translate(
-50%
,
-50%
);
}
- Element with fixed height and width
Note: The ‘.’ operator is used in CSS to identify a CSS class. In the above examples, the class parent is used to style the parent element and the class child is used for the child element.