How can I automatically center the bottom of a <div> on the viewport?-CodePudding

I am creating a kind of website/experiment just based on plain text, no images or anything else, that consists on just one <div> containing several <span> and <a> elements which open on click using JS, revealing text that stacks at the bottom of the <div>.

The problem comes when there is too much text covering the screen, and the user keeps clicking -and therefore, revealing more text-, these new lines, which keep stacking at the bottom, are not automatically visible: the user has to start scrolling to keep reading.

Is there a way I can automatically place the bottom of the <div> in the center of the screen, so it kind of doesn't need scroll? Do you think of any better workaround to avoid manual scrolling when the text fills the whole screen up?

Thanks!

Edit: I added a piece of code for better understanding of what I made.

<div id="container">
  <p >
    <a data-opens="1" href="#">Hello</a>.<span data-openedby="1" > How are <a data-opens="2" href="#">you</a>? </span><span  data-openedby="2"><a data-opens="3" href="#">Welcome</a> to my website.</span>
  </p>
</div>

Basically, this piece of code, but instead of just three <a>, it has so far 300 of them with their respective <span>.

CodePudding user response：

What about something like this:

CSS:

button {
    position: relative;
    z-index: 10;
}

div {
    position: fixed;
    bottom: 50%;
}

HTML:

<button>Click me!</button>

<div>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span><br><br>
</div>

jQuery:

$('button').on('click', function(){
    $('div').append('<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span><br><br>');
});

JSFiddle.

CodePudding user response：

In your CSS file, you can use this code:

.centered-div{
    position: absolute;
    left: 50%;
    top: 50%
}

This will land your in the smack middle of your page.

Hope this helps! :)