CSS: Как выровнять дочерний элемент(relative), в отце(fixed) по центру?

Question

[hadaev_ivan]

<div class="parent">
    <a href="#" class="child">blabla</a>
</div>

.parent {
    position: fixed;
    margin: auto;
    left: 0;
    top:0;
    width: 200px;
    height: 200px;
    text-align: center;
 }

.child {
    display: inline-block;
    position: relative;
    padding: 10px 25px;

    background-color: #4CC713;
    color: white;

    font-family: sans-serif;
    text-decoration: none;
    font-size: 0.9em;
    text-align: center;
    text-indent: 15px;
}

Выравнивает по центру по ширине, но вот по высоте никак не получается выровнять.
Подскажите пожалуйста, как выравнивается по высоте и ширине в таком случае?
вроде мелочь, а уже сколько времени убил :)

Answer 1

[Дамир Рысаев]

Можно вот так.
Задать родителю line-height, а ребёнку поставить line-height: 100%;

Answer 2

[Руслан]

Если подойдет, то можно .child обернуть еще одним блоком, у которого display: table-cell; и vertical-align: middle; а parent дать display: table; типа вот так jsfiddle.net/mBgW5

Answer 3

[hadaev_ivan]

Спасибо) нашел еще способ добавить ребенку
top: 50%
и тоже сработало

Comments

[Руслан]

Можно и так, только по идее надо поднимать на высоту ребенка, типа margin-top:-20px;

Answer 4

[Никита Рябин]

знаю только что по ширине можно margin o auto, а вот по высоте подгоняйте сами