A horizontal centering
method:
By addition to a parent element display: flex; justify-content: center; it centered horizontally.
Method Two:
By adding elements to margin: 0 auto; it centered horizontally.
Method three:
By adding to the parent element position: relative;
Child element position: absolute; left: 50% ; transform: translateX (-50%); it centered horizontally.
Method four:
By adding an element to position: relative; left: 50% ; transform: translateX (-50%); it centered horizontally.
Method five:
By adding to the parent element position: fixed;
Child element position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: 0 auto; centered horizontally.
Second, vertical centering
method one:
By addition to a parent element display: flex; align-items: center; it vertically.
Method Two:
By adding to the parent element display: flex;
Add child elements align-self: center it vertically.
Method three:
By adding to the parent element position: relative;
Child element position: absolute; top: 50% ; transform: translateY (-50%); it vertically.
Method four:
By adding an element to position: relative; top: 50% ; transform: translateY (-50%); it vertically.
Method five:
By adding to the parent element position: fixed;
Child element position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto 0; it vertically.