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

This article mainly introduces the "HTML how to make the document vertical center" related knowledge, editor through the actual case to show you the process of operation, the method of operation is simple and fast, practical, hope that this "HTML how to make the document vertical center" article can help you solve the problem.

The processing logic is:

1. Use JS to grab the size of body in browsing after dom is fully loaded

two。 Grab the size of the dom after the div is fully loaded with JS

3. Then the starting point of the average div is calculated.

4. Dynamically adjust the top value of div in body

Let height = 0

Let horizontal_div = 0

Let top_var = 0

Window.addEventListener ("load", function () {

/ / everything is fully loaded, don't use me if you can use DOM Content Loaded

Top_adjust ()

});

Window.addEventListener ('resize', function (event) {

Top_adjust ()

}, true)

Function top_adjust () {

Height = document.body.clientHeight

Horizontal_div = document.getElementsByClassName ('ClassName') [0]

Top_var = (height-horizontal_div.clientHeight) / 2

Horizontal_div.style ['top'] = top_var

Console.log (top_var)

}

This is the end of the introduction to "how HTML centers the document vertically". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.