分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

居中定位css

发布时间:2023-09-09 19:26责任编辑:熊小新关键词:暂无标签
<div class="parent">
<div class="item"></div>
</div>

  1. 已知元素的宽度和高度:
    .item {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -75px;
    }
    .item {
    position: absolute;
    margin:auto;
    left:0;
    top:0;
    right:0;
    bottom:0;
    }

  2. 未知元素的高度和宽度:
    .item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); / 使用css3的transform来实现 /
    }
    .parent {
    display: flex;
    justify-content:center;
    align-items: center;
    background: #AAA;
    height: 300px; ??/ 注意这里需要设置高度来查看垂直居中效果 /
    }

居中定位css

原文地址:https://blog.51cto.com/13507333/2375177

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved