Center of Div in HTML

Background: The div in HTML can be said to be a layout artifact, but sometimes there is no such one step attribute to define a div to be centered. So you need to manually write CSS to debug

Code:

<style type= "Text/css" >
<!--
Div {
Position:absolute;
top:50%;
left:50%;
margin:-150px 0 0-200px;
width:400px;
height:300px;
border:1px solid #008800;
}
 -
</style>
<div> make a layer vertically centered in the browser window </div>

In fact, the idea of the solution is this: the first need position:absolute; absolute positioning. Instead of the layer's anchor point, use the external patch margin negative method. The negative size is the height of the layer itself divided by two. 

such as: A layer width is 400, the height is 300. Use absolute positioning distance between upper and left is set to 50%. And the value of Margin-top is-150. The value of Margin-left is-200. This allows us to write a style that is vertically centered on the browser.

Note: Above is generally used for vertical center with the browser, want to solve the div vertical Center and the outer Div, only need to add position:relative to the outer div; remember, the outer div sets the height and width .

The code section is posted from the network. The idea is very good, worth studying and drawing lessons from.

Center of Div in HTML