What are the horizontal and vertical centering methods in css? (code example)

This article brings you what are the horizontal and vertical centering methods of CSS? (Code example) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Pure CSS method of vertical centering

1. Based on position: absolute, (but absolute positioning will break away from the document flow and is unfriendly to sibling elements)

1. position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px;

2. margin: auto; position: absolute; top : 0;right:0;bottom: 0;left: 0;

The above two div sizes are clear

3. transform:translate (-100px,-100px); position: absolute; top: 50%;left: 50%;

2. The size is unclear

4. display:flex;justify-content:center;align-items:center;

5. display: table, (will destroy the overall layout of the page)

.wrapper {
                height: 400px;
                width:600px;
                border: 2px solid pink;
                border-radius:10px;
                display:table;
            }
            .box {
                text-align:center;
                position:relative;
                display:table-cell;
                vertical-align:middle;
                background:#abcdef;
            }

       <div class="wrapper">
        
    <div class="box">adfagagafajkfhla</div>
   
     </div>

The above is what are the ways to center CSS horizontally and vertically? (Code examples) full introduction, if you want to know more about CSS video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of What are the horizontal and vertical centering methods in css? (code example). For more information, please follow other related articles on the PHP Chinese website!