How to center floating elements with CSS

Method One

Set the container's float mode to absolute positioning
Then determine the width of the container, such as the width of 500 to 300 layer
Then set the outer margin of the layer

CSS code to copy content to clipboard

1. div{
2. width:500px;
3. height:300px;
4. margin:-150px 0 0-250px;
5. Position:absolute;
6. left:50%;
7. top:50%;
8. Background-color: #000;
9. }

Method Two

The parent element and child element float at the same time, then the parent element moves 50% relative to the left, then the child element moves 50% relative to the right, or the child element moves relative to the left-50%.

CSS Code copy content to clipboard

1. <! DOCTYPE html>
2. <title>demo</title>
3. <meta charset= "Utf-8 "/>
4. <style type=" Text/css "
5. . p{
6. position:relative;
7. left:50%;
8. Float:left;
9. }
10. . c{
11. position:relative
12. Float:left;
13. rightright:50%;
14. }
15. </style>
16. <div class= "P"
18. </div>
19. </body>