Centering Horizontally

The Lorem Ipsum text below centered using three simple CSS rules.

• display: block;
• width: 75vw;
• margin: 0px auto;

The idea is simple. Block displays take up the entire block of space.
In other words it gets its own line and takes up the entire space

Now that the element has an entire line to itself we can change the width, making the inner contents smaller, and then adjust the spacing (margin) to align our content.
In our example we set the width to be 75% of the view width (75vw) and then set margin to "0px auto".
This sets the top and bottom margins to 0 and then automatically distributes the remaning horizontal space around the item, consequently centering it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra ipsum nunc aliquet bibendum enim facilisis. Nam libero justo laoreet sit amet cursus sit amet dictum. Habitant morbi tristique senectus et netus et malesuada. Gravida in fermentum et sollicitudin ac orci. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Volutpat diam ut venenatis tellus in metus vulputate. Eu ultrices vitae auctor eu augue ut lectus. Nisi lacus sed viverra tellus in hac. Eget mi proin sed libero enim sed. Porttitor eget dolor morbi non arcu risus. Magnis dis parturient montes nascetur ridiculus mus. Volutpat odio facilisis mauris sit. Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Massa placerat duis ultricies lacus sed turpis tincidunt id. Ut tortor pretium viverra suspendisse potenti nullam. Vestibulum morbi blandit cursus risus at ultrices mi. Velit egestas dui id ornare arcu odio ut sem nulla. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut placerat. Sed risus pretium quam vulputate. Ipsum dolor sit amet consectetur adipiscing elit duis tristique. At risus viverra adipiscing at in tellus integer feugiat. Vitae ultricies leo integer malesuada nunc.