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

This article mainly introduces the relevant knowledge of "how to achieve the vertical center of the div box by css". The editor shows you the operation process through the actual case, the operation method is simple and fast, and the practicality is strong. I hope this article "how to achieve the vertical center of the div box in css" can help you solve the problem.

1. The specific example code is as follows

Vertical centering online presentation DIVCSS5 # main {position: absolute;width:400px;height:200px;left:50%;top:50%; margin-left:-200px;margin-top:-100px;border:1px solid # 00F} / * css Note: to facilitate screenshots, wrap the CSS code * / DIV horizontally and vertically.

Here set a "# main" object style, wide 400px, high 200px, using absolute positioning position style using both absolute positioning left and top, and setting margin-top and margin-left at the same time, in order to observe the effect, a red border is added to the div box.

2. Screenshot of an example

Div+css achieves screenshots of div objects centered vertically and horizontally at the same time

3. Introduction to the principle of horizontal and vertical centering.

Absolute positioning position:absolute is used here, and left and top are used to set the distance between the object and the left to 50%, but if you set 50%, the box does not actually achieve the center effect, so there is a trick to set margin-left:-200px;margin-top:-100px;, here. The value of margin-left is half the width, the value of margin-top is also half the height of the object, and set to negative at the same time, so that horizontal and vertical centering is achieved.

This is the end of the introduction about "how to achieve the vertical center of the div box by css". 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.