Initial avatar

To center the content, you also can use other technique demonstrated in the Centering pattern.
<div class="avatar">
<div class="avatar__letters">
<!-- The letters -->
...
</div>
</div>
.avatar {
/* Center the content */
display: inline-block;
vertical-align: middle;
/* Used to position the content */
position: relative;
/* Colors */
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
/* Rounded border */
border-radius: 50%;
height: 48px;
width: 48px;
}
.avatar__letters {
/* Center the content */
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
PN

See also

Avatar

1
2
3

Avatar list

1

Badge

Centering

Presence indicator