Вертикальное центрирование в div

Во многих браузерах элемент ul по умолчанию имеет верхнее и нижнее поля.

Хром:

Эти поля нарушают вертикальное центрирование. Просто удали их.

.header {
  padding: 20px;
  background: #000;
  color: #fff;
}

.logo, ul {
  display: inline-block;
  vertical-align: middle;
}

ul {
  margin: 0; /* NEW */
  list-style: none;
  float: right;
}

ul li {
  display: inline-block;
}

<div class = "header">
  <div class = "logo">XCode</div>
  <ul>
    <li>Account settings</li>
    <li>Profile</li>
    <li>Logout</li>
  </ul>
</div>

Вы можете проверить Bulma, особенно их атрибут Уровень. Здесь используется flexbox в фоновом режиме, но вам не нужно его изучать - только простые в использовании классы!

<!-- Main container -->
<nav class = "level">

    <!-- Left side -->
    <div class = "level-left">
        <div class = "level-item">
            <p class = "subtitle is-5">Content</p>
        </div>

    </div>

    <!-- Right side -->
    <div class = "level-right"> 
        <p class = "level-item">More Content</p> 
        <p class = "level-item"><a class = "button is-success">New</a></p>
    </div>
</nav>

В некоторых браузерах элемент <ul> по умолчанию имеет маржу.

Пытаться

ul {
  list-style: none;
  float: right;
  margin: 0;
}

чтобы удалить поля по умолчанию.

маржа: 0; Вам поможет.

ul {
  list-style: none;
  float: right;
  margin: 0;
}

https://jsfiddle.net/n0o915w3/1/

ul {
  list-style: none;
  float: right;
  margin:0 auto;
}
margin:0 auto; will help you to set the ul element in vertically align.

.header {
  padding: 20px;
  background: #000;
  color: #fff;
}

.logo,
ul {
  display: inline-block;
  vertical-align: middle;
}

ul {
  list-style: none;
  float: right;
  margin:0 auto;
}

ul li {
  display: inline-block;
}

<div class = "header">
  <div class = "logo">XCode</div>
  <ul>
    <li>Account settings</li>
    <li>Profile</li>
    <li>Logout</li>
  </ul>
</div>