定位和居中问题

实现效果：

image.png

有固定宽高：

方法1:
设置盒子position为absolute，注意设置父元素position为relative，然后给盒子设置top和left为父盒子的50%，最后使用margin-left和margin-top等于高宽的一半。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width:400px;
            height: 200px;
            background-color: #ccc;
            position: absolute;
            top:50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -100px;
            overflow:hidden;
        }
        .cir1,.cir2{
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #fc0;
        }
        .cir1{
           top:-50px;
           left:-50px;
        }
        .cir2{
            bottom: -50px;
            right: -50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="cir1"></div>
        <div class="cir2"></div>
    </div>
</body>
</html>

方法2:
依然是利用position，给子元素absolute定位，并且定位的上下左右都设置为0，margin为auto，父元素relative定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="4-1.css">
    <style>
        .box{
            width:400px;
            height: 200px;
            background-color: #ccc;
            position: absolute;
            top:0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            overflow:hidden;
        }
        .cir1,.cir2{
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #fc0;
        }
        .cir1{
           top:-50px;
           left:-50px;
        }
        .cir2{
            bottom: -50px;
            right: -50px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="box">
        <div class="cir1"></div>
        <div class="cir2"></div>
    </div>
</div>
    
</body>
</html>

高宽不固定：

方法1:还是用定位，但是不用margin-left和margin-top退回半个宽高，而是用css3的transform属性退回50%；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="4-1.css">
    <style>
        .box{
            /*width:400px;
            height: 200px;*/
            background-color: #ccc;
            position: absolute;
            top:50%;
            left:50%;
            overflow:hidden;
            transform:translate(-50%,-50%);
        }
        .cir1,.cir2{
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #fc0;
        }
        .cir1{
           top:-50px;
           left:-50px;
        }
        .cir2{
            bottom: -50px;
            right: -50px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="box">
    balabalaliliaa
如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。
why?
使用import导入样式表
将样式表放在页面底部
有几个样式表,放在页面不同位置
原因即:当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
how?
        <div class="cir1"></div>
        <div class="cir2"></div>
    </div>
</div>
    
</body>
</html>

image.png

方法2:
flex布局：
给父元素设置display：flex，justify-content：center，水平居中。align-items：center垂直居中，不知道为啥不行，?必须得在子元素设置 align-self:center才可以。


        .div1{
            width:500px;
            height:500px;
            border:1px solid black;
            display: flex;
            justify-content: center;　　/*使垂直居中*/
            align-items:center;　　　　/*使水平居中*///不可以
            
        }
        .div2{
            background: yellow;
            /*width:300px;
            height:200px;*/
            align-self:center
        }

方法3：

定位和居中问题

有固定宽高：

高宽不固定：

推荐阅读更多精彩内容