Text Alignment
The CSS text-align property is used to describe the horizontal alignment of text in an element.
This property has the following values: left, right, center, justify, initial, inherit.
Center Align Elements
To horizontally center an element, then set the width and margin is auto to the block-level element.
The element is not center-aligned if you are not setting the width.
Center an Image Using the margin Property
Setting left and right margin is auto and makes it into the block element results center the image.
Aligning Elements Using the position Property
The left, right, top and bottom properties are used with the position property these are used to align elements.
Left and Right Alignment Using the float Property
The CSS float property can be used to align an element to the left or right.
Vertically Center using padding property
Setting equal top and bottom padding makes the element vertically center but if you want to vertically as well as horizontally center then add text-align property as well.
Vertically Center using Position & Transform Property
Another option is to center an element is to use the position and transform property.
Vertically Center using line-height
This is another way to align text vertically. This solution is useful for a single line and multiple lines of text, but it still requires a fixed height container.
For vertically center aligns the span by setting the div’s line-height equal to its height, and makes the span an inline-block with vertical-align: middle.