center text css

1.center {
2  display: block;
3  margin-left: auto;
4  margin-right: auto;
5}

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

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

1<style>
2.container {
3  height: 200px;
4  position: relative;
5  border: 3px solid green;
6}
7
8.center {
9  margin: 0;
10  position: absolute;
11  top: 50%;
12  left: 50%;
13  -ms-transform: translate(-50%, -50%);
14  transform: translate(-50%, -50%);
15}
16</style>
17
18<div class="container">
19  <div class="center">
20    <p>I am vertically and horizontally centered.</p>
21  </div>
22</div>

1/* To center text, you need to use text-align. */
2
3.centerText {
4  text-align: center; /* This puts the text into the center of the 
5  screen. */
6}
7
8/* There are also other things that you can use in text-align:
9left, right, and justify. Left and right make the test align to the
10right or left of the screen, while justify makes the text align both
11sides by spreading out spaces between some words and squishing others. */

1/* Using flex to center anything*/
2.parent{
3  display: flex;
4  justify-content: center; /* Centering Horizantly */
5  align-items: center; /* Centering Vertically */
6  /* Every element inside this div will be centered*/
7}
8/* Using Line Height*/
9.main-div{
10  width: 50%;
11  height: 40px;
12}
13.main-div p{
14  line-height: 40px; /* Same as parent height*/
15  /* p will be centered vertically inside its parent div*/
16}
17/* CSS Property */
18p{
19  text-align: center;
20}