Summary of common knowledge in css projects

1. div+css layout

1.css horizontal and vertical centering

Method 1: The best compatibility method

.box{
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        width: 200px;
        height: 200px;
        background-color: #eee;
    }

Method 2: css3 transform attribute

.box{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        background-color: #eee;
    }

Method 3: Only flex ie11 supports using mdn to view attribute compatibility and application examples

display: flex; Set the parent container as a flexible box flex-direction: row; Define the flexibility of the parent container Items are arranged on the main axis
justify-content: center; Define the arrangement of flexible items on the main axis X, mainly used for horizontally centered text align-items:
center; Define the arrangement of flexible items on the side axis Y, mainly used Used to vertically center multi-line text

.box-wrapper{        width: 1000px; /*需要给父容器设置宽高*/
        height: 1000px;        background-color: #e9e9e9;        display: flex; /*设置父容器为弹性盒子*/
        justify-content: center; /*定义弹性项目在主轴X的排列方式,主要用于水平居中文字*/
        align-items: center; /*定义弹性项目在侧轴Y的排列方式,主要用于垂直居中多行文字*/
    }
    .box{        width: 200px; /*弹性盒子的项目*/
        height: 200px;        background-color: #eee;    }

For more related articles summarizing common knowledge in css projects, please pay attention to the PHP Chinese website!