centering css elements

1// add to the parent element
2.parent{
3  	height:100vh;
4	display:flex;
5  	justify-content: center;
6  	align-items: center;
7}
8or you can use 
9// add to the parent element
10.parent{
11  	height:100vh;
12	display:gird;
13  	place-item:center;
14}

1// add to the parent element
2.parent {
3	display: grid;
4    place-items: center;
5}

1.container{	
2	margin: 0;
3    position: absolute;
4    top: 50%;
5    left: 50%;
6    -ms-transform: translate(-50%, -50%);
7    transform: translate(-50%, -50%);
8  	width: /* Define the width here; */
9    height: /* Define the height here; */
10}
11
12/*You have to define the width and height! */

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#inner {
2  width: 50%;
3  margin: 0 auto;
4}