Summary of common knowledge in CSS projects

First, DIV+CSS layout

1.css Horizontal Vertical Center

Method 1: Best Practices for compatibility

. box{        Position:absolute;        top:0;        right:0;        left:0;        bottom:0;        Margin:auto;        width:200px;        height:200px;        Background-color: #eee;    }

Method 2:css3 Transform Property

. box{        Position:absolute;        top:50%;        left:50%;        Transform:translate ( -50%, -50%);        width:200px;        height:200px;        Background-color: #eee;    }

Method 3:flex Ie11 supports viewing properties for compatibility and application instances with MDN

Display:flex; Set parent container as elastic box flex-direction:row; To define a parent container's elastic items in a spindle arrangement
Justify-content:center; Defines the arrangement of the elastic items in the spindle x, primarily for horizontal centering of text align-items:
Center Defines how elastic items are arranged in the side axis y, mainly for vertical centering of multiline text

. box-wrapper{        width:1000px;/* You need to set the parent container wide-height */        height:1000px;        Background-color: #e9e9e9;        Display:flex; /* Set the parent container to be a flexible box */        justify-content:center;/* Defines how the flex item is arranged in the spindle x, mainly for horizontal center text */        align-items:center;/* Defines the arrangement of the flex item in the side axis y, mainly for vertical centering of multiline text */    }    . box{        width:200px; * * Flexible Box Project */        height:200px;        Background-color: #eee;    }