html - スクローラーのテキストセンタージャンプが表示される

Question

ロゴのテキストを中央に配置しようとしています。.maindiv は長くなる可能性があり、ハウス ホバーでスクローラー (Windows) を表示できます。

ただし、マウス ホバーとスクローラーが表示されると、テキスト ロゴがジャンプ/位置を変更します。それを防ぐ方法は？テストするには、ブラウザーの高さを縮小して、スクローラーが有効であることを確認してください。

コード: http://jsfiddle.net/qhoc/tppzm/2/

HTML:

<div class="main">
    <div class="logo">
        Logo Text
    </div>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</div>

CSS:

.main {
    position: fixed;
    width: 200px;
    background: gray;
    overflow: hidden;
    top: 0;
    bottom: 0;
}

.main:hover {
    overflow: auto;
}

.logo {
    text-align: center;
}

li {
    line-height: 40px;
}

要件:

• .logoスクローラーでも位置を変えずにセンタリングするのが好きです。
• この場合、JS を使用して位置を調整したり、位置をハードコードしたりしないことをお勧めします。

更新 1:

私があまり好きではない2つの選択肢があります：

1. position:absolute動作しますが、他のものも台無しにします

2. width:180pxで修正しますが、ハードコードでもありますが、ハードコードされ.logoていると主張することもできます200px