Vertical Centering

suggest change

Remarks

This is used when the element’s dimensions (width and height) are not known or dynamic.

Prefer to use Flexbox over all other options as it is optimized for user interface design.

Found a mistake? Have a question or improvement idea? Let me know.

Vertical centering:

*Vertical Centering

*Centering with display table

*Centering with Transform

*Centering with Flexbox

*Centering Text with Line Height

*Centering with Position absolute

*Centering with pseudo element

Table Of Contents

0Getting started

1Backgrounds

2Centering

3Margins

4Media queries

5Floats

6Typography

7Flexbox

8Cascading and specificity

9Animations

10Selectors

11Colors

12Box mode

13Transiti

14Length units

15Pseudo-elements

16Positioning

172D transforms

18Tables

19Browser support prefixes

20Normalizing browser styles

21Padding

22Layout control

23Filter property

24Comments

25Cursor styling

26Box shadow

27Custom properties, variables

28Shapes for floats

29Grid

30Border

31Functions

323D Transforms

33Counters

34Single element shapes

35Opacity

36Performance

37Columns

38Inline-block layout

39Inheritance

40CSS Image Sprites

41Clipping and masking

42List styles

43Outlines

44Structure and formatting of a css rule

45Fragmentation

46Overflow

47CSS Object Model (CSSOM)

48Feature queries

49Stacking context

50Internet Explorer hacks

51Block formatting context

52Vertical centering

53Object Fit and Placement

54Multiple columns

55CSS design patterns

56Contributors