Сделать кнопку по центру блока?

Question

[viktorulyushev]

Есть примерно такая структура

<div class="block">
   <img src="http://chloe.promo-z.ru/pictures/news/4431.png" />
   <a href="#">
         <span class="block1">Читать</span>
   </a>
</div>

и вот нужно сделать чтобы кнопка читать была по центру блока block,и картинка центрировалась в блоке

Answer 1

[viktorulyushev]

Вот так получилось как мне надо,может кому пригодится,если что не правильно поправьте

https://jsfiddle.net/gpttfL22/

Answer 2

[display: block]

.block{
  position: relative;
  display: inline-block;
}
.block a{
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Comments

[viktorulyushev]

а как сделать чтобы картинка центровалась внутри блока block и кнопка читать центровалась относительно блока block а не картинки?

Answer 3

[HamSter]

html:

<div class="block">
   <img src="http://chloe.promo-z.ru/pictures/news/4431.png" />
   <a href="#">
     <span class="block1">Читать</span>
   </a>
</div>

Вариант 1:

img,
a {
  display: block;
  margin: 0 auto;
  text-align: center;
}

Вариант 2:

img {
  display: block;
  margin: 0 auto;
}

.block {
  text-align: center;
}

Вариант 3:

.block {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

...