2019/9/5 第六部分：精简版 | FE-Interview /* 1 */ .left { width: 120px; float: left; } .right { margin-left: 120px; } /* 2 */ .left { width: 120px; float: left; } .right { width: calc(100% - 120px); float: left; } .wrap { width: 100%; height: 200px; } .wrap > div { height: 100%; } /* 1 */ .left { width: 120px; float: left; blog.poetries.top/FE-Interview-Questions/simply/#_5-4-cookie-和-session 1/16 2019/9/5 第六部分：精简版 | FE-Interview } .right { float: right; width: 120px; } .center { margin: 0 120px; } /* 2 */ .left { width: 120px; float: left; } .right { float: right; width: 120px; } .center { width: calc(100% - 240px); margin-left: 120px; } /* 3 */ .wrap { display: flex; } .left { width: 120px; } .right { width: 120px; } .center { flex: 1; } text-align: center margin auto table position + transform /* 1 */ .wrap { text-align: center blog.poetries.top/FE-Interview-Questions/simply/#_5-4-cookie-和-session 2/16 2019/9/5 第六部分：精简版 | FE-Interview } .center { display: inline; /* or */ /* display: inline-block; */ } /* 2 */ .center { width: 100px; margin: 0 auto; } /* 2 */ .wrap { position: relative; } .center { position: absulote; left: 50%; transform: translateX(-50%); } margin position + margin position transform flex IFC + vertical-align:middle /* 1 */ .center { height: 100px; margin: 50px 0; } /* 2 */ .center { height: 100px; position: absolute; top: 50%; margin-top: -25px; } /* 1 */ .center { position: absolute;