Центрирующие элементы Внутри div

Question

Эй У каждого есть пара вопросов, касающихся центрирования текста и divs в контейнере.

Вот мой код. http://codepen.io/_Dawood/pen/ByjvqO

Мои вопросы:

1.) Что лучший способ, чтобы получить какой-либо элемент (текст, изображения) внутри DIV быть центрируется по вертикали. 2.) Хорошая или плохая идея использовать фиксированную высоту на контейнере div?

<header> 
    <div class="logo"> 
    logo 
    </div> 
    <h1 class="SiteTitle"> 
    Registrar's <span>Office</span> 
    </h1> 
    <div class="search"> 
    Search 
    </div> 
    <div class="az"> 
    A -> Z Index 
    </div> 
    <div class="sublinks"> 
    <a href=""> About</a> 
    <p>Main Office</p> 
    </div> 
</header> 


@import 'susy'; 
* { box-sizing: border-box; } 
header { 
    background:red; 
    width:100%; 
    height: 100%; 
    @include container(100%); 
    height:100px; 



    .logo{ 
    @include span(3 of 12); 
    border:1px solid #fff; 
    height: 100%; 

    } 

    h1{ 
    @include span(5 of 12); 
    border:1px solid #fff; 
    height: 100%; 
    font-size:40px; 
    } 
.search, { 
    @include span(2 of 12); 
    border:1px solid #fff; 
    height: 100%; 
} 


    .az { 
    @include span(2 of 12 last); 
     border:1px solid #fff; 
    height: 100%; 


    } 
.sublinks { 
    background:blue; 
    clear:both; 
    text-align:right; 
    @include span(12 of 12); 
    @include break; 
    a, p { 
    display:inline-block 
    } 
} 
} 

Answer 1

По моему опыту, фиксированная высота не обязательно является проблемой. Если у вас есть контейнер с фиксированной высотой и дочерний элемент с фиксированной высотой, вы можете легко центрировать вещи по вертикали только с помощью css. Например, если у вас есть контейнер 100px и ребенок 50px, поместите его 25px сверху.

С более динамичными элементами, я обычно использую javascript. Если вы используете JQuery, вы можете настроить функцию следующим образом:

function centerElement(container, child) { 
    var containerHt = $(container).height(); 
    var childHt = $(child).height(); 
    var top = Math.round((containerHt - childHt)/2); 
    $(child).css('top', top); 
} 

Конечно, контейнеру будет необходимо иметь относительное положение и ребенок должен иметь абсолютную позицию. Левое значение также может быть проблемой, и в этом случае вы могли бы найти свою функцию для определения ширины обоих элементов и вдвое уменьшить их разницу.

Наконец, есть еще один CSS решение, которое иногда работает (хотя это может вызвать некоторые другие проблемы, особенно с переливом: скрытый):

#container { display: table; } 
#child { display: table-cell; vertical-align: middle; }