.example-effect-container {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #999;
}
.demo-2-1-div {
        width: 50px;
        height: 50px;
        background-color: blue;
}

.example-effect-container {
        position: relative;
        border: 1px solid #999;
}
.demo-2-2-div {
        width: 50px;
        height: 50px;
        background-color: blue;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* transform:translate(-25px, -25px); */
}

.example-effect-container {
        border: 1px solid #999;
}
.demo-2-3-div {
        width: 50px;
        /* width: 20%; */
        height: 50px;
        background-color: blue;
        margin: auto auto;
}

.example-effect-container {
        border: 1px solid #999;
}
.demo-2-4-div {
        width: 90%;
        margin: 10px auto;
        border: 1px solid #999;
        font-size: 15px; /* 实际上设置的是高度 */
        height: 50px;
        line-height: 50px;
        text-align: center;
}

.demo-3-1-div {
        width: 90%;
        margin: 10px auto;
        border: 1px solid #999;
        font-size: 15px;
        height: 45px;
        text-align: center;
}
.demo-3-1-div.div-1 {
        line-height: normal;
}
.demo-3-1-div.div-2 {
        line-height: 3;
}
.demo-3-1-div.div-3 {
        line-height: 45px;
}
.demo-3-1-div.div-4 {
        line-height: 300%;
}
.demo-3-1-div.div-5 {
        line-height: 3em;
}

#example-4-1 .example-effect-container {
        border: 1px solid #999;
        padding: 5px;
}
.demo-4-1-div {
        width: 100px;
        height: 60px;
}
.demo-4-1-div.div-1 {
        background-color: blue;
}
.demo-4-1-div.div-2 {
        background-color: red;
}
.demo-4-1-div.div-3 {
        background-color: yellow;
        height: 30px;
        width: 300px;
}
.demo-4-1-div.div-4 {
        background-color: green;
}

#example-4-2 .example-effect-container {
        border: 1px solid #999;
        padding: 5px;
}
.demo-4-2-div {
        width: 100px;
        height: 60px;
}
.demo-4-2-div.div-1 {
        background-color: blue;
}
.demo-4-2-div.div-2 {
        background-color: red;
}
.demo-4-2-div.div-3 {
        background-color: yellow;
        float: right;
        height: 30px;
        width: 300px;
}
.demo-4-2-div.div-4 {
        background-color: green;
}

#example-4-3 .example-effect-container {
        border: 1px solid #999;
        padding: 5px;
}
.demo-4-3-div {
        width: 100px;
        height: 60px;
}
.demo-4-3-div.div-1 {
        background-color: blue;
}
.demo-4-3-div.div-2 {
        background-color: red4
}
.demo-4-3-div.div-3 {
        background-color: yellow;
}
.demo-4-3-div.div-4 {
        background-color: green;
}

#example-4-4 .example-effect-container {
        border: 1px solid #999;
        padding: 5px;
}
.demo-4-4-div {
        width: 100px;
        height: 60px;
}
.demo-4-4-div.div-1 {
        background-color: blue;
}
.demo-4-4-div.div-2 {
        background-color: red;
}
.demo-4-4-div.div-3 {
        background-color: yellow;
        float: right;
}
.demo-4-4-div.div-4 {
        background-color: green;
        float: right;
}

#example-4-5 .example-effect-container {
        border: 1px solid #999;
        padding: 5px;
}
.demo-4-5-div {
        width: 100px;
        height: 60px;
}
.demo-4-5-div.div-1 {
        background-color: blue;
}
.demo-4-5-div.div-2 {
        background-color: red;
        display: inline-block;
}
.demo-4-5-div.div-3 {
        background-color: yellow;
        float: right;
}
.demo-4-5-div.div-4 {
        background-color: green;
        float: right;
}

无