Как центрировать изображение по горизонтали и выровнять его по дну контейнера?

Удалите строку position: relative;. Я не уверен, почему именно, но это исправляет это для меня.

не стал бы

margin-left:auto;
margin-right:auto;

добавил в .image_block изображение для решения проблемы?
Обратите внимание, что это не будет работать в IE6 (возможно, 7 не уверен)
там надо будет делать на .image_block контейнер Div

text-align:center;

position:relative; тоже может быть проблемой.

.image_block    {
    width: 175px;
    height: 175px;
    position: relative;
}

.image_block a  {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0px;
}

.image_block img    {
/*  nothing specific  */
}

объяснение: элемент, позиционируемый абсолютно, будет относительно ближайшего родителя, который имеет нестатическое позиционирование. Я предполагаю, что вы довольны тем, как отображается ваш .image_block, поэтому мы можем оставить здесь относительное позиционирование.

Таким образом, элемент <a> будет расположен относительно .image_block, что даст нам выравнивание по нижнему краю. затем мы text-align: center элемент <a> и даем ему 100% ширину, чтобы он был размером с .image_block.

<img> в <a> затем отцентрируется соответствующим образом.

ты пробовала:

.image_block{
text-align: center;
vertical-align: bottom;
}

Это сложно; Причина сбоя в том, что вы не можете позиционировать с помощью полей или выравнивания текста при абсолютном позиционировании.

Если изображение находится в блоке только одно, я рекомендую что-то вроде этого:

.image_block {
    width: 175px;
    height: 175px;
    line-height: 175px;
    text-align: center;
    vertical-align: bottom;
}

Вместо этого вам может потребоваться прикрепить вызов vertical-align к образу; не совсем уверен без тестирования. Однако использование vertical-align и line-height будет относиться к вам намного лучше, чем попытки возиться с абсолютным позиционированием.

Это тоже работает (подсказка из этого вопрос)

.image_block {
  height: 175px;
  width:175px;
  position:relative;
}
.image_block a img{
 margin:auto; /* Required */
 position:absolute; /* Required */
 bottom:0; /* Aligns at the bottom */
 left:0;right:0; /* Aligns horizontal center */
 max-height:100%; /* images bigger than 175 px  */
 max-width:100%;  /* will be shrinked to size */ 
}

#header2
{
   display: table-cell;
   vertical-align: bottom;
   background-color:Red;
}


<div style = "text-align:center; height:300px; width:50%;" id = "header2">
<div class = "right" id = "header-content2">
  <p>this is a test</p>
</div>
</div>