如何保持浮动层水平垂直居中

关注

原创最新推荐文章于 2026-06-24 15:32:12 发布 228 阅读 AI 写同款· GEO 优化 ›

STM32F103+AX58100 EtherCAT从站SPI移植实战：CubeMX配置避坑指南本文详细介绍了STM32F103与AX58100 EtherCAT从站控制器的SPI接口移植实战，重点解析CubeMX配置中的关键参数与常见陷阱。内容涵盖硬件连接规范、SPI模式设置、中断优先级规划及协议栈对接技巧，帮助开发者高效实现工业自动化领域的实时通信方案。特别强调CPOL/CPHA配置与AX58100的匹配要求，避免数据错位问题。阅读详情

如何保持浮动层垂直水平居中

1、弹性盒子

display: flex;
justify-content:center;     /* 水平居中 */
align-items:center;  /*垂直居中*/

2、利用绝对定位与transform

.parent{
   position: absolute;
   background-color: #eee;
   width: 100%;
   height: 100%;
        }
.parent .children{
    background-color: #751;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
}

3.将父元素相对定位，子元素绝对定位，利用margin负值为子元素宽高的一半来实现。

.parent{
  position: relative;
   background-color: #eee;
   height: 600px;
   width: 100%;
        }
.parent .children{
    background-color: #751;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
}

4.利用定位与margin：auto

.parent{
  width: 100%;
  height: 37.5rem/* 600px */;
  background: #09c;
  position: relative;
}
.children{
    width: 100px;
    height: 100px;
    background-color: #eee;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}