Como posicionar o texto sobre uma imagem em css

Como centralizo um texto sobre uma imagem em css?

<div class="image">
    <img src="sample.png"/>
    <div class="text">
       <h2>Some text</h2>
    </div>
</div>

Eu quero fazer algo como o abaixo, mas estou tendo dificuldades, aqui está o meu css atual

<style>
.image {
   position: relative;
}

h2 {
   position: absolute;
   top: 200px;
   left: 0;
   width: 100%;
   margin: 0 auto;
   width: 300px;
   height: 50px;
}
</style>

Quando uso a imagem de fundo, não recebo nenhuma saída do html2pdf:

<style>
#image_container{
    width: 1000px;
    height: 700px;
    background-image:url('switch.png');
}
</style>
<a href="prints.php">Print</a>
<?php ob_start(); ?>
<div id="image_container"></div>
<?php 
$_SESSION['sess'] = ob_get_contents(); 
ob_flush();
?>

Aqui está prints.php:

<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML($_SESSION['sess']);
$html2pdf->Output('random.pdf');
?>

Que tal algo assim: http://jsfiddle.net/EgLKV/3/

É feito usando position:absolutee z-indexpara colocar o texto sobre a imagem.

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
}
#text {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
  left: 150px;
  top: 350px;
}

<div id="container">
  <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
  <p id="text">
    Hello World!
  </p>
</div>

Esse é outro método para trabalhar com tamanhos responsivos. Ele manterá o texto centralizado e manterá sua posição dentro dos pais. Se você não quiser centralizar, é ainda mais fácil, basta trabalhar com os absoluteparâmetros. Lembre-se de que o recipiente principal está em uso display: inline-block. Existem muitas outras maneiras de fazer isso, dependendo do que você está trabalhando.

Baseado em Centrar o Desconhecido

Exemplo de código de trabalho aqui

HTML

<div class="containerBox">
    <div class="text-box">
        <h4>Your Text is responsive and centered</h4>
    </div>
    <img class="img-responsive" src="http://placehold.it/900x100"/>
</div>

CSS

.containerBox {
    position: relative;
    display: inline-block;
}
.text-box {
    position: absolute;    
    height: 100%;
    text-align: center;    
    width: 100%;
}
.text-box:before {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
}
h4 {
   display: inline-block;
   font-size: 20px; /*or whatever you want*/
   color: #FFF;   
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

Por que não definir sample.pngcomo imagem de plano de fundo textou h2classe css? Isso entrará em vigor conforme você tiver escrito uma imagem.

Para um design responsivo, é bom usar um contêiner com um layout relativo e o conteúdo (colocado no contêiner) com um layout fixo como.

Estilos CSS:

/*Centering element in a base container*/

.contianer-relative{ 
  position: relative;
 }

.content-center-text-absolute{ 
  position: absolute; 
  text-align: center;
  width: 100%;
  height: 0%;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 51;
}

Código HTML:

<!-- Have used ionic classes -->
<div class="row">
    <div class="col remove-padding contianer-relative"><!-- container with position relative -->
        <div class="item item-image clear-border" ><a href="#"><img ng-src="img/engg-manl.png" alt="ENGINEERING MANUAL" title="ENGINEERING MANUAL" ></a></div> <!-- Image intended to work as a background -->
        <h4 class="content-center-text-absolute white-text"><strong>ENGINEERING <br> MANUALS</strong></h4><!-- content div with position fixed -->
    </div>
    <div class="col remove-padding contianer-relative"><!-- container with position relative -->
        <div class="item item-image clear-border"><a href="#"><img ng-src="img/contract-directory.png" alt="CONTRACTOR DIRECTORY" title="CONTRACTOR DIRECTORY"></a></div><!-- Image intended to work as a background -->
        <h4 class="content-center-text-absolute white-text"><strong>CONTRACTOR <br> DIRECTORY</strong></h4><!-- content div with position fixed -->
    </div>       
</div>

Para o layout de grade IONIC, elementos de grade espaçados igualmente e as classes usadas no HTML acima, consulte - Grade: colunas uniformemente espaçadas . Espero que te ajude... :)

como Harry Joy aponta, defina a imagem como plano de fundo da div e, se você tiver apenas uma linha de texto, poderá definir a altura da linha como igual à altura da div, e isso colocará seu texto no campo centro da div.

Se você tiver mais de uma linha, defina a exibição como célula da tabela e alinhamento vertical no meio.

a partir de 2017, isso é mais responsivo e funcionou para mim. Isto é para colocar texto dentro de vs over, como um crachá. em vez do número 8, eu tinha uma variável para extrair dados de um banco de dados.

esse código começou com a resposta de Kailas acima

https://jsfiddle.net/jim54729/memmu2wb/3/

Meu HTML

<div class="containerBox">
  <img class="img-responsive"    src="https://s20.postimg.org/huun8e6fh/Gold_Ring.png">
  <div class='text-box'>
   <p class='dataNumber'> 8 </p>
  </div>
</div>

e meu css:

.containerBox {
  position: relative;
  display: inline-block;
}

.text-box {
  position: absolute;
  height: 30%;
  text-align: center;
  width: 100%;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 30px;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: 120px;
  margin: auto;
  padding: auto;
}

.dataNumber {
  margin-top: auto;
}

Uma maneira pequena e curta de fazer o mesmo

HTML

<div class="image">
     <p>
        <h3>Heading 3</h3>
        <h5>Heading 5</h5>
     </p>
</div>

CSS

.image {
        position: relative;
        margin-bottom: 20px;
        width: 100%;
        height: 300px;
        color: white;
        background: url('../../Images/myImg.jpg') no-repeat;
        background-size: 250px 250px;
    }