2017-12-06 27 views
0

Ich habe diesen Code für die Zentrierung sowohl horizontal als auch vertikal. Es funktioniert gut, außer wenn mehr Inhalt als passt, wird der Inhalt abgeschnitten. Gibt es eine Möglichkeit, dies mit CSS zu beschränken, damit es nicht aus dem sichtbaren Bereich herauskommt? Ich möchte Javascript nicht mit einbeziehen.CSS-Center mit übersetzen und verhindern Inhalt Überlauf

.b { 
 
    padding: 0; 
 
    position: absolute; 
 
    margin: 0; 
 
    width: 100%; 
 
    max-width: 500px; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
}
<div class="a"> 
 
    <div class="b">dui ut erat. Phasellus nibh magna, tempor vitae, dictum sed, vehicula sed, mauris. In enim arcu, porta vel, dictum eu, pretium a, ipsum. Donec cursus, lorem ac posuere viverra, sem tellus accumsan dolor, vel accumsan tortor est et est. Praesent molestie. 
 
    Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla. Nullam vel ante et nunc accumsan viverra. Vestibulum nulla justo, tristique nec, tincidunt eget, ultricies sollicitudin, 
 
    nulla. Proin dui ante, consectetur a, tincidunt in, mattis ut, ipsum. Sed tristique. Mauris et sapien. Quisque risus. Ut laoreet hendrerit mi. Nam vestibulum viverra diam. Nullam eros ipsum, rutrum ut, ultricies sed, congue sed, est. Pellentesque 
 
    porttitor. Donec dictum urna eu mi. Maecenas in lorem. Vestibulum in ipsum. Praesent ac nunc. Donec vitae lectus. Etiam commodo velit ut mi. Duis egestas, quam faucibus interdum tincidunt, enim sem tincidunt tellus, sed condimentum tellus tortor u 
 
    mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam ollicitudin, nisi egestas scelerisque 
 
    pretium, odio enim sodales metus, venenatis vulputate arcu quam eget purus. Fusce convallis mattis nunc. Fusce non nunc. Maecenas nec tellus a mi ornare auctor. Proin magna nunc, congue ut, dapibus eu, placerat vitae, erat. Nam egestas pretium mauris. 
 
    Cras posuere, est nec egestas scelerisque, tellus justo scelerisque nisi, at consequat ante dolor eget diam. Phasellus pharetra, lectus vel molestie tincidunt, orci tellus dapibus odio, vel semper lacus tortor vitae metus.Vestibulum accumsan enim 
 
    nec ipsum. Nunc cursus sapien. Etiam fermentum luctus arcu. condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem. 
 
    Curabitur dignissim nunc id arcu. Nulla facilisi. In imperdiet. Aliquam enim. Nullam hendrerit purus. Suspendisse lectus orci, commodo eget, luctus ac, venenatis id, magna. In hac habitasse platea dictumst. Fusce aliquam. Donec ut nisi ac diam posuere 
 
    imperdiet. Cras est enim, consequat non, pretium at, molestie quis, sapien. Suspendisse porta, quam ac ultricies sagittis, libero nisi gravida sem, in convallis sem ante nec purus. Suspendisse in tellus vitae purus porttitor pharetra. Curabitur in 
 
    ipsum. Fusce lobortis, ligula eu facilisis semper, arcu ipsum ornare lorem, ultricies tempor diam arcu vitae est. Aliquam non sapien. Phasellus quam. Praesent eu ligula id mauris tincidunt hendrerit. Fusce nec enim. Nam posuere. Morbi at ipsum vitae 
 
    diam tempus mollis. Pellentesque sollicitudin condimentum neque. Sed auctor consequat lorem. Donec quis lacus fringilla augue venenatis vulputate. Duis lobortis consectetur libero. Aliquam erat volutpat. Etiam interdum bibendum purus. Vivamus id tellus 
 
    et tellus dictum molestie. Nam sit amet arcu dictum mauris rhoncus tristique. Nunc rhoncus porta velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tempor diam eu leo. Praesent leo. Morbi blandit, 
 
    nulla non rhoncus dapibus, metus tellus posuere justo, et condimentum leo ante cursus libero. Vestibulum eu magna a metus pellentesque molestie. Nulla elementum iaculis velit. Nullam sit amet velit et sapien interdum accumsan. Vestibulum dapibus lectus 
 
    quis orci. Mauris gravida sodales velit. Maecenas sollicitudin malesuada lacus. Morbi sollicitudin augue vel elit. Duis ipsum felis, fermentum id, iaculis id, fermentum et, velit. Ut ultricies. In nibh orci, euismod venenatis, vulputate ut, pharetra 
 
    in, purus. Nam condimentum leo in nunc. Donec ut nisi vitae ante viverra imperdiet. Suspendisse in neque eu metus fermentum malesuada. Aliquam erat volutpat. Aenean nibh sem, varius vitae, facilisis sed, venenatis faucibus, neque. Quisque odio. Cras 
 
    eget enim. Suspendisse potenti. Donec mattis, felis vel dignissim mattis, mi enim feugiat ligula, eget imperdiet eros nibh non risus. Nullam fermentum eros et eros. Mauris facilisis est ac velit. Nunc ipsum odio, pharetra ac, posuere et, adipiscing 
 
    at, lacus. Nunc malesuada velit at quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer ipsum felis, placerat id, rutrum sed, molestie ornare, leo. Nam fermentum luctus leo. Curabitur in ipsum. 
 
    Maecenas non lectus a quam porta consequat. Fusce molestie egestas ligula. Cras nisl risus, tempus ac, tincidunt eu, gravida sit amet, eros. Duis nec lacus sed ipsum scelerisque tempus. Phasellus sapien nunc, lacinia sit amet, vulputate vel, tincidunt 
 
    nec, eros. Praesent quis ligula. Nulla facilisi. Nullam fermentum bibendum elit. Vivamus feugiat lacus. Mauris tempus. Vivamus lorem. Quisque blandit odio non mi. Etiam tempus, enim in dictum commodo, ante augue cursus sapien, non vehicula dolor lacus 
 
    sed mi. Etiam enim lectus, dictum eget, scelerisque eget, luctus quis, velit. Maecenas semper vulputate nisi. Duis fringilla. Etiam iaculis nisl a ipsum. Nunc varius dolor id nisi. Curabitur sit amet velit auctor arcu ullamcorper luctus. </div> 
 
</div>

+0

Sie versuchen, 'Überlauf verwendet, könnte: hidden' – A61NN5

Antwort

1

Sie können max-height: 100%; hinzufügen, die in der unten stehenden Schnipsel funktioniert. Sie müssen möglicherweise auch die height Einstellungen zu den Vorfahrenelementen hinzufügen, wenn keine festen Höhen vorhanden sind, machen Sie sie zu 100% bis zu body und html.

.b { 
 
    padding: 0; 
 
    position: absolute; 
 
    margin: 0; 
 
    width: 100%; 
 
    max-width: 500px; 
 
    max-height: 100%; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
}
<div class="a"> 
 
    <div class="b">dui ut erat. Phasellus nibh magna, tempor vitae, dictum sed, vehicula sed, mauris. In enim arcu, porta vel, dictum eu, pretium a, ipsum. Donec cursus, lorem ac posuere viverra, sem tellus accumsan dolor, vel accumsan tortor est et est. Praesent molestie. 
 
    Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla. Nullam vel ante et nunc accumsan viverra. Vestibulum nulla justo, tristique nec, tincidunt eget, ultricies sollicitudin, 
 
    nulla. Proin dui ante, consectetur a, tincidunt in, mattis ut, ipsum. Sed tristique. Mauris et sapien. Quisque risus. Ut laoreet hendrerit mi. Nam vestibulum viverra diam. Nullam eros ipsum, rutrum ut, ultricies sed, congue sed, est. Pellentesque 
 
    porttitor. Donec dictum urna eu mi. Maecenas in lorem. Vestibulum in ipsum. Praesent ac nunc. Donec vitae lectus. Etiam commodo velit ut mi. Duis egestas, quam faucibus interdum tincidunt, enim sem tincidunt tellus, sed condimentum tellus tortor u 
 
    mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam ollicitudin, nisi egestas scelerisque 
 
    pretium, odio enim sodales metus, venenatis vulputate arcu quam eget purus. Fusce convallis mattis nunc. Fusce non nunc. Maecenas nec tellus a mi ornare auctor. Proin magna nunc, congue ut, dapibus eu, placerat vitae, erat. Nam egestas pretium mauris. 
 
    Cras posuere, est nec egestas scelerisque, tellus justo scelerisque nisi, at consequat ante dolor eget diam. Phasellus pharetra, lectus vel molestie tincidunt, orci tellus dapibus odio, vel semper lacus tortor vitae metus.Vestibulum accumsan enim 
 
    nec ipsum. Nunc cursus sapien. Etiam fermentum luctus arcu. condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem. 
 
    Curabitur dignissim nunc id arcu. Nulla facilisi. In imperdiet. Aliquam enim. Nullam hendrerit purus. Suspendisse lectus orci, commodo eget, luctus ac, venenatis id, magna. In hac habitasse platea dictumst. Fusce aliquam. Donec ut nisi ac diam posuere 
 
    imperdiet. Cras est enim, consequat non, pretium at, molestie quis, sapien. Suspendisse porta, quam ac ultricies sagittis, libero nisi gravida sem, in convallis sem ante nec purus. Suspendisse in tellus vitae purus porttitor pharetra. Curabitur in 
 
    ipsum. Fusce lobortis, ligula eu facilisis semper, arcu ipsum ornare lorem, ultricies tempor diam arcu vitae est. Aliquam non sapien. Phasellus quam. Praesent eu ligula id mauris tincidunt hendrerit. Fusce nec enim. Nam posuere. Morbi at ipsum vitae 
 
    diam tempus mollis. Pellentesque sollicitudin condimentum neque. Sed auctor consequat lorem. Donec quis lacus fringilla augue venenatis vulputate. Duis lobortis consectetur libero. Aliquam erat volutpat. Etiam interdum bibendum purus. Vivamus id tellus 
 
    et tellus dictum molestie. Nam sit amet arcu dictum mauris rhoncus tristique. Nunc rhoncus porta velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tempor diam eu leo. Praesent leo. Morbi blandit, 
 
    nulla non rhoncus dapibus, metus tellus posuere justo, et condimentum leo ante cursus libero. Vestibulum eu magna a metus pellentesque molestie. Nulla elementum iaculis velit. Nullam sit amet velit et sapien interdum accumsan. Vestibulum dapibus lectus 
 
    quis orci. Mauris gravida sodales velit. Maecenas sollicitudin malesuada lacus. Morbi sollicitudin augue vel elit. Duis ipsum felis, fermentum id, iaculis id, fermentum et, velit. Ut ultricies. In nibh orci, euismod venenatis, vulputate ut, pharetra 
 
    in, purus. Nam condimentum leo in nunc. Donec ut nisi vitae ante viverra imperdiet. Suspendisse in neque eu metus fermentum malesuada. Aliquam erat volutpat. Aenean nibh sem, varius vitae, facilisis sed, venenatis faucibus, neque. Quisque odio. Cras 
 
    eget enim. Suspendisse potenti. Donec mattis, felis vel dignissim mattis, mi enim feugiat ligula, eget imperdiet eros nibh non risus. Nullam fermentum eros et eros. Mauris facilisis est ac velit. Nunc ipsum odio, pharetra ac, posuere et, adipiscing 
 
    at, lacus. Nunc malesuada velit at quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer ipsum felis, placerat id, rutrum sed, molestie ornare, leo. Nam fermentum luctus leo. Curabitur in ipsum. 
 
    Maecenas non lectus a quam porta consequat. Fusce molestie egestas ligula. Cras nisl risus, tempus ac, tincidunt eu, gravida sit amet, eros. Duis nec lacus sed ipsum scelerisque tempus. Phasellus sapien nunc, lacinia sit amet, vulputate vel, tincidunt 
 
    nec, eros. Praesent quis ligula. Nulla facilisi. Nullam fermentum bibendum elit. Vivamus feugiat lacus. Mauris tempus. Vivamus lorem. Quisque blandit odio non mi. Etiam tempus, enim in dictum commodo, ante augue cursus sapien, non vehicula dolor lacus 
 
    sed mi. Etiam enim lectus, dictum eget, scelerisque eget, luctus quis, velit. Maecenas semper vulputate nisi. Duis fringilla. Etiam iaculis nisl a ipsum. Nunc varius dolor id nisi. Curabitur sit amet velit auctor arcu ullamcorper luctus. </div> 
 
</div>

+0

Dies funktioniert, aber wenn ich versuche, padding 20px auf b hinzuzufügen, tut es Polsterung auf der Unterseite hinzuzufügen. Warum das? – Toniq

0

Ihre div über der Seitenhöhe würde, wenn Sie die y um -50% umgewandelt. Try this:

-webkit-transform: translate(-50%, 0); 
-ms-transform: translate(-50%, 0); 
transform: translate(-50%, 0); 
1

Was würde ich empfehlen die Verwendung eines flexbox Behälter zu machen.

Mit Flexbox, alles, was Sie brauchen, sind drei verschiedene Arten, um ein Element zu zentralisieren sowohl horizontal als auch vertikal:

Zusätzlich zur Verwendung von wesentlich weniger CSS-Regeln wird automatisch sicherstellen, dass die untergeordneten Elemente nicht überlaufen.

Dann müssen Sie nur ein width auf dem Kind Element (s) festlegen, um die horizontale Zentrierung zu präsentieren. dies hilft

.a { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.b { 
 
    width: 200px; 
 
}
<div class="a"> 
 
    <div class="b">dui ut erat. Phasellus nibh magna, tempor vitae, dictum sed, vehicula sed, mauris. In enim arcu, porta vel, dictum eu, pretium a, ipsum. Donec cursus, lorem ac posuere viverra, sem tellus accumsan dolor, vel accumsan tortor est et est. Praesent molestie. 
 
    Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla. Nullam vel ante et nunc accumsan viverra. Vestibulum nulla justo, tristique nec, tincidunt eget, ultricies sollicitudin, 
 
    nulla. Proin dui ante, consectetur a, tincidunt in, mattis ut, ipsum. Sed tristique. Mauris et sapien. Quisque risus. Ut laoreet hendrerit mi. Nam vestibulum viverra diam. Nullam eros ipsum, rutrum ut, ultricies sed, congue sed, est. Pellentesque 
 
    porttitor. Donec dictum urna eu mi. Maecenas in lorem. Vestibulum in ipsum. Praesent ac nunc. Donec vitae lectus. Etiam commodo velit ut mi. Duis egestas, quam faucibus interdum tincidunt, enim sem tincidunt tellus, sed condimentum tellus tortor u 
 
    mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam ollicitudin, nisi egestas scelerisque 
 
    pretium, odio enim sodales metus, venenatis vulputate arcu quam eget purus. Fusce convallis mattis nunc. Fusce non nunc. Maecenas nec tellus a mi ornare auctor. Proin magna nunc, congue ut, dapibus eu, placerat vitae, erat. Nam egestas pretium mauris. 
 
    Cras posuere, est nec egestas scelerisque, tellus justo scelerisque nisi, at consequat ante dolor eget diam. Phasellus pharetra, lectus vel molestie tincidunt, orci tellus dapibus odio, vel semper lacus tortor vitae metus.Vestibulum accumsan enim 
 
    nec ipsum. Nunc cursus sapien. Etiam fermentum luctus arcu. condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem. 
 
    Curabitur dignissim nunc id arcu. Nulla facilisi. In imperdiet. Aliquam enim. Nullam hendrerit purus. Suspendisse lectus orci, commodo eget, luctus ac, venenatis id, magna. In hac habitasse platea dictumst. Fusce aliquam. Donec ut nisi ac diam posuere 
 
    imperdiet. Cras est enim, consequat non, pretium at, molestie quis, sapien. Suspendisse porta, quam ac ultricies sagittis, libero nisi gravida sem, in convallis sem ante nec purus. Suspendisse in tellus vitae purus porttitor pharetra. Curabitur in 
 
    ipsum. Fusce lobortis, ligula eu facilisis semper, arcu ipsum ornare lorem, ultricies tempor diam arcu vitae est. Aliquam non sapien. Phasellus quam. Praesent eu ligula id mauris tincidunt hendrerit. Fusce nec enim. Nam posuere. Morbi at ipsum vitae 
 
    diam tempus mollis. Pellentesque sollicitudin condimentum neque. Sed auctor consequat lorem. Donec quis lacus fringilla augue venenatis vulputate. Duis lobortis consectetur libero. Aliquam erat volutpat. Etiam interdum bibendum purus. Vivamus id tellus 
 
    et tellus dictum molestie. Nam sit amet arcu dictum mauris rhoncus tristique. Nunc rhoncus porta velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tempor diam eu leo. Praesent leo. Morbi blandit, 
 
    nulla non rhoncus dapibus, metus tellus posuere justo, et condimentum leo ante cursus libero. Vestibulum eu magna a metus pellentesque molestie. Nulla elementum iaculis velit. Nullam sit amet velit et sapien interdum accumsan. Vestibulum dapibus lectus 
 
    quis orci. Mauris gravida sodales velit. Maecenas sollicitudin malesuada lacus. Morbi sollicitudin augue vel elit. Duis ipsum felis, fermentum id, iaculis id, fermentum et, velit. Ut ultricies. In nibh orci, euismod venenatis, vulputate ut, pharetra 
 
    in, purus. Nam condimentum leo in nunc. Donec ut nisi vitae ante viverra imperdiet. Suspendisse in neque eu metus fermentum malesuada. Aliquam erat volutpat. Aenean nibh sem, varius vitae, facilisis sed, venenatis faucibus, neque. Quisque odio. Cras 
 
    eget enim. Suspendisse potenti. Donec mattis, felis vel dignissim mattis, mi enim feugiat ligula, eget imperdiet eros nibh non risus. Nullam fermentum eros et eros. Mauris facilisis est ac velit. Nunc ipsum odio, pharetra ac, posuere et, adipiscing 
 
    at, lacus. Nunc malesuada velit at quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer ipsum felis, placerat id, rutrum sed, molestie ornare, leo. Nam fermentum luctus leo. Curabitur in ipsum. 
 
    Maecenas non lectus a quam porta consequat. Fusce molestie egestas ligula. Cras nisl risus, tempus ac, tincidunt eu, gravida sit amet, eros. Duis nec lacus sed ipsum scelerisque tempus. Phasellus sapien nunc, lacinia sit amet, vulputate vel, tincidunt 
 
    nec, eros. Praesent quis ligula. Nulla facilisi. Nullam fermentum bibendum elit. Vivamus feugiat lacus. Mauris tempus. Vivamus lorem. Quisque blandit odio non mi. Etiam tempus, enim in dictum commodo, ante augue cursus sapien, non vehicula dolor lacus 
 
    sed mi. Etiam enim lectus, dictum eget, scelerisque eget, luctus quis, velit. Maecenas semper vulputate nisi. Duis fringilla. Etiam iaculis nisl a ipsum. Nunc varius dolor id nisi. Curabitur sit amet velit auctor arcu ullamcorper luctus. </div> 
 
</div>

Hoffnung:

Dies kann in der folgenden gesehen werden! :)

Verwandte Themen