CSS: Centering

Centering horizontally inner text

<div class="QqdBq"> hello</div>

.QqdBq {
 border: solid 3px orange;
 text-align: center;
}

Center block element horizontally using margin

<div class="cen-block-mar-RBTWy">hello</div>

.cen-block-mar-RBTWy {
 width: 100px;
 margin: 0 auto;
 border: solid 3px orange;
}

Center innner text horizontally using flex

<div class="x-flex-gHfhF">hello</div>

.x-flex-gHfhF {
 display: flex;
 justify-content: center;
 border: solid 3px orange;
}

Center block element horizontally using flex

<div class="x-flex-sdwn2"> <div>hello</div> </div>

.x-flex-sdwn2 {
 display: flex;
 justify-content: center;
 border: solid 3px orange;
}

Center horizontally for position fixed element

div.x {
 position: fixed;
 top: 2px;
 /* moves the left edge of the element to the center of the viewport */
 left: 50%;
 /* move it back left by half of its own width */
 transform: translateX(-50%);
 border: solid 1px grey;
}

• CSS: Position Property
• CSS: Transform

Center vertically using grid layout

to vertically center a text inside a block element, use grid layout display: grid; and place-content: center; .

text node is considered a anonymous element, that is why using grid on a block works to center the text inside vertically.

• CSS: Grid Layout

example

<div class="NjC23">center via grid</div>

.NjC23 {
 height: 200px;
 width: 200px;
 display: grid;
 place-content: center;
 border: dotted 4px green;
}

Center vertically using flex layout

to vertically center a text inside a block element, use display: flex; and align-items: center; and justify-content: center; .

text node is considered a anonymous element, that is why using flexbox on a block works to center the text inside vertically.

• CSS: Flexbox Layout
• CSS: align-items (flex, grid)
• CSS: justify-content (flex, grid)

example

<div class="cPr4Q">center via flexbox</div>

.cPr4Q {
 height: 200px;
 width: 200px;
 display: flex;
 align-items: center;
 justify-content: center;
 border: solid 3px orange;
}