how to center an image element inside a block in css

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

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

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>