CSS3与CSS2 上下左右居中 发表于 2021-08-25 | 更新于 2022-02-25 css3 上下左右居中:1. transform:translate(左右,上下)上下左右居中:123456.video{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);} 2. flex (左右,上下)上下左右居中:12345.container{ display: flex; align-items: center;/* 垂直居中 */ justify-content: center;/* center左右居中, space-between两端对齐 */ } css2 上下左右居中:3. position:absolute, margin(左右,上下)上下左右居中:123456789.video{ position:absolute; top:50%; left:50%; with: 100px; height: 100px; margin-top: -50px; margin-left: -50px;} 4. display: table(左右,上下)上下左右居中:1234567891011.box { display: table; table-layout: fixed; //ie width: 100%; height: 100%; text-align:center;}.box div { display: table-cell; vertical-align: middle;}