  <head>
      <style>
        .d1 {
            width: 400px;
            height: 400px;
            background-color: red;
            position: relative;
        }
        .d1::before {
            content:"";
            display: inline-block;
            height: 100%;
            width: 1%;
            vertical-align: middle;
        }
        .d2 {
            width: 100px;
            height: 50px;
            background-color: pink;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">as</div>
    </div>
</body>

5、（已知子元素高度）：绝对定位50%；margin-top：子元素高度的一半

子元素绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半（块级元素）

<head>
     <style>
        .d1 {
            width: 400px;
            height: 400px;
            background-color: red;
            position: relative;
        }
        .d2 {
            position: absolute;
            width: 100px;
            top:50%;
            height: 100px;
            margin-top:-50px;
            background-color: pink;

        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">as</div>
    </div>
</body>

6、（子元素未知高度）：绝对定位50%；transform：子元素高度的50%

子元素绝对定位元素距离顶部50%，并用transform属性向Y轴反向偏移50%（部分浏览器存在兼容性问题）

<head>
    <style>
        .d1 {
            width: 400px;
            height: 400px;
            background-color: red;
            position: relative;
        }
        .d2 {
            position: absolute;
            width: 100px;
            top:50%;
            transform: translateY(-50%);
            background-color: pink;

        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">as</div>
    </div>
</body>

三：水平垂直居中：

1、父相子绝 + margin （已知子元素高度）：宽高各移一半

margin-left 和 margin-top 分别是宽高的一半

        .fa {
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            position: relative;
        }
        .son {
            width: 100px;
            height: 50px;
            position: absolute;
            left: 50%;
            margin-left: -50px;
            top: 50%;
            margin-top: -25px;
        }   


    <div class="fa">
        <div class="son"></div>
    </div>

2、父相子绝 + transform 移动（未知子元素高度）

x和y轴各移动宽高的百分之50%

 .div1 {
            width: 500px;
            height: 500px;
            background-color: red;
            position: relative;
        }
        .div2 {
            height: 200px;
            width: 200px;
            background-color: blue;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

<div class="div1">
    <div class="div2">
    </div>
</div>

3、利用flex，主/纵轴都设为center

  .d1 {
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            display: flex;
            justify-content: center;  /*主轴 */
            align-items: center;      /*纵轴 */
        }
        .d2 {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
<body>
    <div class="d1">
        <div class="d2">as</div>
    </div>
</body>

4、用flex：弹性盒子+margin：auto；

        .fa {
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            display: flex;

        }
        .son {
            width: 20px;
            height: 20px;
            background-color: pink;
            margin: auto;

        }
    <div class="fa">
        <div class="son"></div>
    </div>

5、屏幕上

此方法十分常用，常规的登录及注册页面都需要用到。要保证较好的兼容性，还需要用到表布局。

6、父相子绝 + margin: auto; 上下左右：0；

（如果子元素没有设置高度，那么子元素的高度会被拉伸至父元素的高度）

       .fa {
            width: 500px;
            height: 500px;
            background-color: purple;
            position: relative;
        }
        .sn {
            width: 300px;
            height: 300px;
            background-color: yellow;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            （如果子元素没有设置高度，那么子元素的高度会被拉伸至父元素的高度）
        }

    <div class="fa">
        <div class="sn"></div>
    </div>

7、padding+margin-top:（父height-子heigh）/2

        .fa {
            width: 500px;
            height: 400px;
            background-color: red;
            box-sizing: border-box;
            padding-top: 1px;   /*不写这个的话，无法垂直居中，因为父 子元素之间没有任何东西，会外边距合并，可以用padding-top和box来解决，更多解决方案在盒子模型里  */
        }
        .son {
            width: 300px;
            height: 200px;
            background-color: blue;
            margin: 0 auto;
            margin-top: 100px;
        }
 
    <div class="fa">
        <div class="son"></div>

8、利用grid （兼容性较差，不推荐）

<head>
    <style>
        .d1 {
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            display: grid;
        }
        .d2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">as</div>
    </div>
</body>

垂直水平居中：

1、position+tranform
.fa {
   positon:relative;
}
.son{
   position:absolute;
   left:50%;
   right:50%;
   transform:translate(-50%,-50%)
}

2、postion+margin:宽高各移一半
.fa{
   position:relative;
}
.son{
   position:absolute;
   left:50%;
   top:50%;
   margin-left:-父元素宽度的一半px；
   margin-top:-父元素高度的一半px;
}

3、margin-top:（父height-子heigh）/2
.fa {
   box-sizing:border-box;
   padding-top:1px;
}
.son {
   margin:0 auto;
   margin-top:（父height-子heigh）/2

}

4、positon+margin
.fa{
   positon:relative;
}
.son{
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:auto;
}

5、flex
.fa {
   display:flex;
   justify-content:center;
   align-items:center;
}

6、flex+margin:auto
.fa {
   display:flex;
}
.son{
   margin:auto;
}

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的