This is what I was looking for.
https://i.sstatic.net/lb6dY.png
Below is the CSS code I am using:
<html>
<header>
<style type="text/css>
*{margin:0 0 0 0;padding:0 0 0 0;}
div.block{width:400px;height:121px;border:1px solid red;position:absolute;top:50%;left:50%;}
div.box{float:left;}
div img{margin:0px;padding:0;width:121px;height:121px;float:left;}
div.description{float:left;border 1px solid red;margin:10px 50px;}
</style>
</header>
<body>
<div class="block">
<div class="box"><img src="test.jpg" /></div>
<div class="description">
<p>music mane: xxxxxxxx</p>
<p>author: yyyyyyyy</p>
<p>publication:20081001</p>
<p>language: english</p>
</div>
</div>
</body>
</html>
Here is the test image.
https://i.sstatic.net/hd0QR.jpg
The div is currently at the lower right corner of the screen, how can I move it to the center of the screen? Using top:50%;left:50% doesn't achieve the desired result.