I've had this issue before where when I center text vertically in a <div> using

(for example) height: 50px; line-height: 50px;

When you minimize the page using ctrl - the entire page scales down, but for
some reason some of the words in the single line sentence drop down 50px to the next
line. Why is that? And how would one prevent it from happening?

Can you post the URL (address) of a page that demonstrates the problem?
I can't reproduce that problem with the snippet you posted. Maybe there is something else on the page that interferes.