What is the best way to put name and job title on two separate lines on a webpage using HTML, CSS?

What is the best way to put my name and job title centered vertically and horizontally on a webpage for my own website. I want to have my name with Web Developer underneath it.

I used this method:

.landing{

height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;

}

This works but doesnt take into account a position:fixed border with height=60px into account (it doesn't come out totally vertically centered).

Is there another way to centred these items regardless of additional elements on the page? (margin: auto also creates the same problem as above).

In addition, how should the html layout look, currently:

<div class="landing">
   <div class="landing1">HasanMirza</div>
   <div class="landing2">Web De<span class="v">v</span>eloper</div>
</div>

(the 'v' is rotated to look like an angle bracket, just an effect I am trying to achieve).

If you want to position anything in your viewport in a fixed position irrespective of any other element then use position: fixed. Grid allows you to place items in the center really easily. See code below:

• Info on positioning on css tricks
• How to center using grid W3docs.com

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
  margin:0; /* the items will have an 8px offset if this isn't set to zero */
}

.landing {
  position: fixed;
  height: 100vh;
  width: 100vw;
  display: grid;
  place-content: center;
}

<!-- language: lang-html -->

<div class="landing">
   <div class="landing1">HasanMirza</div>
   <div class="landing2">Web De<span class="v">v</span>eloper</div>
</div>

<!-- end snippet -->