width height定

1.绝对定位 top50% left50% margin-top 负值定为自身高一半 margin-left负值定为自身宽一半

2.定位拉伸 定位父relative子absolute top0 left0 right0 bottom0 margin auto

      .box {
            width: 300px;
            height: 300px;
            background-color: aquamarine;
            position: relative;
        }

        .pinx_box {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

width height不定 尺寸不固定

1.兼容性很好 只有ie老版本不兼容因为display:inline-block没有

水平居中 text-align: center;

垂直居中 利用伪元素

    .box::after {
            content: "";
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }

 <style>
          .box {
            width: 300px;
            height: 300px;
            text-align: center;
            background-color: aquamarine;
        }

        .pinx_box {
            width: 100px;
            height: 80px;
            background-color: pink;
            display: inline-block;
            vertical-align: middle;
        }

        .box::after {
            content: "";
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
    </style>

<body>
    <div class="box">
        <div class="pinx_box"></div>
    </div>
</body>

2. 弹性很好 兼容性不好

父容器包裹起来 给父容器设置

3.IE>=9才能用 

利用left top百分比是相对于父元素的，translate百分比是相对于自身的。

好了本篇文章就到这里了，喜欢的话可以关注我，会持续更新的，有错误欢迎大家指出，大家可以在我这里互相讨论学习，一起进步。

青山不改 绿水长流 我们下篇文章见😋 

# 前端 # html # javascript
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

沃云统一开发平台介绍

沃云集成平台研发平台介绍1.平台优势2.平台原理3.研发平台使用方法4.遇到的问题5.现阶段实现的功能6.后续需要补充的功能和优化内容研发平台介绍1.平台优势解决孤岛式应用，实现能力共享；现有系统框架过于复杂，跨系统业务处理成本居高不下，协同服务共享，降低运维成本；提高项目应用资源监控能力，改善资源利用率；业务微服务化，快速发布、快速部署，快速响应业务需求变化；沃云平台不仅提供了自动化的、可快速部

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生

基于docker的test-containers环境百宝箱

笔者语录： 我开了个公众号【Java你我他】，欢迎大家关注。  在很多时候，程序猿们更关注代码本身，而不愿意把时间花费在环境搭建上，这也是Docker变得越来越受欢迎的原因之一。test-containe是Docker生态圈中的一颗新星，其 主要针对测试领域、背靠Docker实现环境百宝箱功能。  test-containers： 你要的环境，我都有~  假设我们现在需要一个redis-clust

avatar 云原生