CSS Horizontal Center relative positioning and negative margin method

The code is as follows	Copy Code
<title>div Horizontal Center </title> <style> Div#wrap { position:relative; width:760px; left:50%; Margin-left: -380px; border:1px solid #333; Background-color: #ccc; } </style> <div id= "Wrap" > <p> It's an element in the P tag. </p> </div>

Analysis

position:relative; is relative positioning, which is relative to the current level of the parent
left:50%; Center meaning (move center element to right 50% relative to its original position)
Margin-left: -380px; The negative margin method (see that the element is already placed in the middle of the page but not centered.) Centered is the central point of the entire element that overlaps the center line of the page. So I'm going to change the element margin-left to half of its width, of course, in order to move to the left, the offset is a negative number.