Responsive CSS cercles qui peut contenir centrée sur le contenu

Je suis à la recherche d'un moyen de créer un réactif CSS3 cercle qui peut contenir centrée sur le contenu.
Concernant le cercle, j'ai trouvé quelques bonnes infos dans cette question. Dommage, il semble que l'on ne peut pas centrer le contenu de celui-ci.

Cette question est également assez semblable à la mienne, malgré le fait que c'est une image qui devrait être centré. À l'aide d'une image d'arrière-plan en a pas une option dans mon cas, de sorte que cette option ne fonctionne pas pour moi.

Avez-vous des idées de comment je pourrais aborder cette?
Bien sûr, je pourrais utiliser une image, mais le CSS serait beaucoup plus élégant!

Avez-vous considéré l'utilisation de SVG? De quelle manière voulez-vous de les cercles à être sensible à la fenêtre du navigateur ou le contenu?
Est la hauteur du contenu fixe?
J'ai juste essayé de SVG - fonctionne comme un charme, même si je continue à rechercher un CSS seule solution. Oui, la hauteur du contenu est fixe.
J'avais posté une réponse, qui n'ont pas sensible cercles, que j'ai ensuite remarqué, c'est une exigence de la vôtre, donc je l'ai supprimé. Maintenant j'ai publié une nouvelle réponse qui a la capacité de réaction, je crois que vous désirez.

OriginalL'auteur Sven | 2013-01-12

  1. 5

    Pur CSS, nécessitant beaucoup plus des wrappers

    Mise à JOUR: message d'Origine (que j'ai supprimé) a manqué le fait que vous avez été la recherche d'un responsive design. Construire sur de ma réponse pour le responsive cercles question de la référence de semble fonctionner dans tous les CSS3 navigateurs, voir tripoter.

    HTML (nécessitant cinq niveaux de couverture, je n'ai gardé qu'un cercle dans le présent html)

    <div class="circles">
    <div>
      <div>
        <div>
          <div>
            <!-- BEG Content -->
            All types of content (see fiddle)
            <!-- END Content -->
          </div>
        </div>
      </div>
    </div>
    <!-- ditto the above 3 more times -->
</div>

    CSS

    .circles{
    margin:0px auto;
}
.circles > div {
    overflow:hidden;
    float:left;
    width:auto;
    height:auto;
    position: relative;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background:#eee;
}

.circles > div > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.circles > div > div > div {
    display: table;
    width: 100%;
    height: 100%;
}
.circles > div > div > div > div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

@media (max-width: 320px)
{
    .circles > div {padding: 50%;}
}

@media (min-width: 321px) and (max-width: 800px)
{
    .circles > div {padding: 25%;}
}

@media (min-width: 801px)
{
    .circles{width:800px}
    .circles > div {padding: 12.5%;}
}
    +1 Pour la grande et de la solution réactive!!

    OriginalL'auteur ScottS

  2. 1

    Si la hauteur du contenu est fixe et que vous voulez une méthode CSS, utilisez les propriétés suivantes s'appliquent à ce qui est à l'intérieur de la cicle

    margin: auto; /*will center the element*/
position: relative;
top: 50%;
margin-top: - [here insert the height of the element if you know in advance / 2]px

    OriginalL'auteur Thanh Trung

  3. 1

    Accepté la réponse n'a pas de travail pour moi, puisque je voulais faire pivoter le cercle.
    Ce n':

    HTML

    <div class="mycircle">
  <div class="mycontent">
    <span>TEXT</span>
  </div>
</div>

    CSS

    .mycircle {
  width: 30%; 
  height: 0;
  padding: 15% 0; //padding top & bottom must equal width 
  border-radius: 50%;
  -moz-border-radius: 50%; 
  -webkit-border-radius: 50%; 
  background: #dedede; 
}
.mycontent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.mycontent:before {
  content: '';
  vertical-align: middle;
  display: inline-block;
  width: 0;
  height: 100%;
}

.mycontent span {
  vertical-align: middle;
  display: inline-block;
}

    OriginalL'auteur Kim