想做出“图2”的效果，拼音位置上下左右居中，怎么实现呢？“图1”是素材图。
方便的话，可以帮忙写写源码，谢谢了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
width: 1152px;
overflow: hidden;
border-right: 1px solid #70ad47;
border-bottom: 1px solid #70ad47;
margin: 20px auto;
}
.rows{
border-top: 1px solid #70ad47;
border-left: 1px solid #70ad47;
float: left;
}
.row_dt{
border-bottom: 1px solid #70ad47;
width: 63px;
height: 31px;
line-height: 31px;
text-align: center;
font-size: 12px;
color: #333;
}
.row_dd{
width: 63px;
height: 64px;
line-height: 64px;
font-size: 32px;
color: #333;
text-align: center;
position: relative;
}
.row_dd span{
position: relative;
z-index: 1
}
.row_dd:before{
width: 0;
height: 100%;
content: "";
border-left: 1px dashed #70ad47;
display: block;
position: absolute;
top: 0;left: 50%;
margin-left: -1px;
z-index: 0
}
.row_dd:after{
width: 100%;
height: 0;
content: "";
border-top: 1px dashed #70ad47;
display: block;
position: absolute;
top: 50%;left: 0;
z-index: 0
}
</style>
</head>
<body>
<div class="container">
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
<dl class="rows">
<dt class="row_dt">míng</dt>
<dd class="row_dd"><span>明</span></dd>
</dl>
</div>
</body>
</html>