vertical and horizontal align center div

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

1.container {
2  min-height: 100vh; // height of the browser viewport
3  display: flex;
4  flex-direction: column;
5  justify-content: center;
6  align-items: center;
7}

1#html code
2<div class="parent">
3	<h1 class="child">CSS is cool</h1>
4</div>
5
6#css code
7.parent{
8  display:grid;
9  place-items:center;
10  
11  width:560px; 
12  height: 560px;
13}

1.center {
2  height: 200px;
3  position: relative;
4  border: 3px solid green;
5}
6
7.center p {
8  margin: 0;
9  position: absolute;
10  top: 50%;
11  left: 50%;
12  transform: translate(-50%, -50%);
13}