.username-wrapper {
  display: table;
  width: 40px;
  height: 40px;
  overflow: hidden;
}

.username {
  display: table-cell; 
  vertical-align: middle;
  background-color: red;
  border-radius: 20px;
  text-align: center;
  color: white;
  font-family: Arial;
}
<div class="username-wrapper">
  <div class="username">
    Vasya
  </div>
</div>

@using Microsoft.AspNetCore.Identity
@using PM20.Models;

@inject SignInManager<ApplicationUser> SignInManager
@inject UserManager<ApplicationUser> UserManager

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

<style>
      #targetElement {
        height: 200px;
        margin: 50px;
        background: #9cf;
      }
      .positionDiv {
        position: absolute;
        width: 75px;
        height: 75px;
        background: #080;
      }
    .no-close .ui-dialog-titlebar-close {
        display: none;
    }

    .username-wrapper {
        display: table;
        width: 40px;
        height: 40px;
        overflow: hidden;
    }

    .username {
        display: table-cell;
        vertical-align: middle;
        background-color: magenta;
        border-radius: 20px;
        text-align: center;
        color: white;
        font-family: Arial;
    }

    .usernameAdmin {
        display: table-cell;
        vertical-align: middle;
        background-color: red;
        border-radius: 20px;
        text-align: center;
        color: white;
        font-family: Arial;
    }
</style>
@if (SignInManager.IsSignedIn(User))
{
    <form asp-area="" asp-controller="Account" asp-action="Logout" method="post" id="logoutForm" class="navbar-right">
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">Hello @UserManager.GetUserName(User)!</a>
            </li>
            <li>
                <div class="username-wrapper">
                    @if (User.IsInRole("Administrator"))
                    {
                        <div class="usernameAdmin" onclick='showDialog();'>
                            @UserManager.GetUserName(User).Substring(0, User.ToString().Length >= 2 ? 2 : User.ToString().Length)
                        </div>
                    }
                    else
                    {
                        <div class="username" onclick="showDialog">
                            <a class="username" href=javascript:showDialog()>
                                @UserManager.GetUserName(User).Substring(0, User.ToString().Length >= 2 ? 2 : User.ToString().Length)
                            </a>
                        </div>
                        <div id="dialog2" class="positionDiv" title="Dialog Title" hidden="hidden">I'm a dialog</div>
                    }
                </div>
            </li>
            <li>
                <button type="submit" class="btn btn-link navbar-btn navbar-link">Log off</button>
            </li>
        </ul>
    </form>
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li><a asp-area="" asp-controller="Account" asp-action="Login">Log in</a></li>
    </ul>
}
<script type='text/javascript'>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelector('.username').addEventListener('click', function () {
            alert(this.innerHTML);
        });
    });
</script>
<script type="text/javascript">
    function showDialog() {
        $("#dialog2").dialog(
            {
                autoOpen: false,
                modal: false,
                height: "auto",
                width: "auto",
                position:  { my: 'roght top', at: 'top+150' },
                show: {effect: 'fade', speed: 1000},
                hide: { effect: 'fade', speed: 1000 },
                dialogClass: "no-close",
                buttons: [
                    {
                        text: "OK",
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
        });

        $("#dialog2").dialog('open');
    }
</script>

 <div class="popup">
                            Olololo lolololo!<br>Alalala lalalala lalalala!
                            Хыхы
                            Гиги
                        </div>