css center alignment

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/* 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. */

1// example 1 
2div { display: grid; place-items: center; }
3
4// example 3
5div{ display:flex; align-items:center; }
6
7// example 3
8div { width: 100%; margin: 0 auto; }

1.center {
2  text-align: center;
3  border: 3px solid green;
4}

1
2p
3{ 
4  text-align: center; 
5}
6