<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>center</title> <style> /*#outer{ width: 500px; height: 300px; background-color: skyblue; position: relative; }*/ /*已知高度*/ /*#box{ width: 100px; height: 100px; background-color: green; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }*/ /*#outer{ width: 500px; height: 300px; background-color: skyblue; position: relative; }*/ /*未知高度*/ /*#box{ background-color: green; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }*/ #outer{ width: 500px; height: 300px; background-color: skyblue; display: flex; justify-content: center; align-items: center; } /*未知高度*/ #box{ background-color: green; } </style> </head> <body> <div id="outer"> <div id="box">我需要居中</div> </div> </body> </html>
关于元素水平垂直居中
猜你喜欢
转载自www.cnblogs.com/wodeqiyuan/p/11791231.html
今日推荐
周排行