Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use pure CSS to achieve the horizontal and vertical center of div. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

To center a DIV horizontally, simply set the width and height of the div and use margin: 0 auto to center the DIV horizontally

So how to make the div be displayed vertically in the middle of the page? the premise here is to set the width and height of the div first. Here is the method and code.

First, set the width and height of html and body to 100%.

Then give the div itself a relative positioning and set the outer margin according to the width and height of the div itself.

The code is as follows

You can also set it here using absolute positioning.

Below you can also use the transform property to set the code:

Of course, if you want not to set a fixed width and height, you can use Jquery to achieve.

On "how to use pure CSS to achieve div horizontal vertical center" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.