center align css

1/* this will center all children within the parent element. */
2.parent {
3  display: flex;
4  justify-content: center; /* horizontal */
5  align-items: center; /* vertical */
6}

1.parent {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}

1.parent {
2  position: relative;
3}
4.child {
5  position: absolute;
6  top: 50%;
7  left: 50%;
8  transform: translate(-50%, -50%);
9}

1.centre {
2    display: flex;
3    flex-direction: column;
4    align-items: center;
5    /* it center the item vertically */
6    justify-content: center;
7    /* it center the item horizontally */
8}

1/* This works wonderfully when you know the size of
2the thing you are centering. If you don’t know, or are 
3thinking it might change and want to be future proof,
4try this: */
5
6.centered {
7   position: fixed;
8   top: 50%;
9   left: 50%;
10   /* bring your own prefixes */
11   transform: translate(-50%, -50%);
12}
13
14/* The translate value for transform is based off the size
15of the element, so that will center nicely. */

1text-align: center;