Css vertical horizontal center?

  css3, question

How can b be centered in a both vertically and horizontally?
The code is as follows:

<!  DOCTYPE html>
 <html lang="zh">
 <head>
 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 <meta charset="UTF-8"/>
 <title></title>
 <style>
 #A {
 position: relative;
 width: 500px;
 height: 500px;
 background-color: green;
 }
 
 #B {
 position: absolute;
 max-width: 300px;
 max-height: 300px;
 background-color: blue;
 }
 </style>
 </head>
 <body>
 
 
 <div id="A">
 < div id="B "> brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother
 Brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother to brother, brother
 Brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother to brother, brother
 Brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother to brother, brother
 Brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother, brother to brother, brother
 </div>
 </div>
 
 
 </body>
 </html>

Two methods:

The first is:

#A {
 position: relative;
 width: 500px;
 height: 500px;
 background-color: green;
 }
 
 #B {
 position: absolute;
 max-width: 300px;
 max-height: 300px;
 background-color: blue;
 /* add */
 margin:auto;
 left:0;
 right:0;
 top:0;
 bottom:0;
 }

The second is:

#A {
 position: relative;
 width: 500px;
 height: 500px;
 background-color: green;
 }
 
 #B {
 position: absolute;
 max-width: 300px;
 max-height: 300px;
 background-color: blue;
 /* add */
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
 }