绝对定位的元素未在相对div内正确对齐

Question

在我基于Cordova的应用程序中，我有一个div，它应该显示英国车牌的图形表示。

这应该是它的样子：

（如何在iOS上显示 - Cordova ver 3.8）

然而，在Android，Cordova ver 4.1.1上，它看起来像这样：

该片段如下所示，说明了这个问题。任何帮助将不胜感激。

＆＃13;

＆＃13;

.registration-plate-container {
    text-align: center;
}

.registration-plate-ui {
    background: linear-gradient(to bottom, #f8d038 0%, #f5ca2e 100%);
    padding: .25em 1em .25em 1.75em;
    font-weight: bold;
    font-size: 2em;
    border-radius: 5px;
    border: 1px solid #000;
    box-shadow: 1px 1px 1px #ddd;
    position: relative;
    font-family: helvetica, ariel, sans-serif;
}

.registration-plate-ui:before {
    content: 'GB';
    display: block;
    width: 30px;
    height: 100%;
    background: #063298;
    position: absolute;
    top: 0;
    border-radius: 5px 0 0 5px;
    color: #f8d038;
    font-size: .5em;
    line-height: 85px;
    padding-left: 5px;
}

.registration-plate-ui:after {
    content: '';
    display: block;
    position: absolute;
    top: 7px;
    left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 30px;
    border: 1px dashed #f8d038;
}

＆＃13;

<div class='registration-plate-container'><span class='registration-plate-ui'>AB12 CDE</span></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

.registration-plate-container {
    /* text-align: center; */ /* throws off position property centering */
    position: relative;       /* this is the actual container element,
                                 so set the boundaries here for abspos children */
     height: 75px;            /* for demo only */
     border: 1px dashed red;  /* for demo only */
}

.registration-plate-ui {
    background: linear-gradient(to bottom, #f8d038 0%, #f5ca2e 100%);
    padding: .25em 1em .25em 1.75em;
    font-weight: bold;
    font-size: 2em;
    border-radius: 5px;
    border: 1px solid #000;
    box-shadow: 1px 1px 1px #ddd;
    position: absolute;          /* changed from 'relative` */
    left: 50%;                   /* center horizontally */
    transform: translateX(-50%); /* center fine-tuning */
    font-family: helvetica, ariel, sans-serif;
}

.registration-plate-ui:before {
    content: 'GB';
    display: block;
    width: 30px;
    height: 100%;
    background: #063298;
    position: absolute;
    top: 0;
    left: 0;               /* tell it where to go */
    border-radius: 5px 0 0 5px;
    color: #f8d038;
    font-size: .5em;
    line-height: 85px;
    padding-left: 5px;
}

.registration-plate-ui:after {
    content: '';
    display: block;
    position: absolute;
    top: 7px;
    left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 30px;
    border: 1px dashed #f8d038;
}

<div class='registration-plate-container'><span class='registration-plate-ui'>AB12 CDE</span></div>