Html 几个带圆角的嵌套div_Html_Css_Layout

Html 几个带圆角的嵌套div

html css layout

Html 几个带圆角的嵌套div,html,css,layout,Html,Css,Layout,您好，我正在尝试垂直和水平对齐4个div内彼此与CSS，但没有任何工作为我请帮帮我！提前谢谢我的CSS请注意，这只是我尝试过的一种方法。我已经在这里坐了大约两个小时，弄得一团糟，弄不明白 * { margin:0px; padding:0px; } body { background-color:#454545; } .wrapper { margin:auto; width:960px; } .circle-wrapper { hei

您好，我正在尝试垂直和水平对齐4个div内彼此与CSS，但没有任何工作为我

请帮帮我！提前谢谢

我的CSS请注意，这只是我尝试过的一种方法。我已经在这里坐了大约两个小时，弄得一团糟，弄不明白

* {
    margin:0px;
    padding:0px;
}

body {
    background-color:#454545;
}

.wrapper {
    margin:auto;
    width:960px;
}

.circle-wrapper {
    height:918px;
    width:918px;
    background-image:url(images/overlay.png);
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    position:absolute;
    text-align:center;
    margin:auto;
}

.outer-inner-background {
    background-image:url(images/center-circle.GIF);
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    position:relative;
    height:494px;
    width:494px;
    margin:auto;
}

.outer-inner-rings {
    background-image:url(images/inner-outer-rings.PNG);
    background-size:cover;
    background-position:center center;
    position:relative;
    width:494px;
    height:494px;
    margin:auto;
}

.inner-image {
    position:relative;
    height:308px;
    width:308px;
    margin:auto;
}

我的HTML：我不在乎结构是否改变，它只是需要工作

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Untitled Document</title>
</head>

<body>
    <div class="wrapper">
        <div class="circle-wrapper">
            <div class="outer-inner-background">
            </div>

            <div class="outer-inner-rings">
            </div>

            <div class="inner-image">
                <img class="inner-img" src="images/inside-image.PNG" width="308px" height="308px">
            </div>
        </div>
    </div>
</body>
</html>


无标题文件

尝试使用

位置：相对和位置：绝对在适当的<代码>左> /代码>和<代码>顶部>代码>将它们放在中间。
 ，你可以在你的内部div中使用绝对定位，在这里，代码>左> /代码>和<代码>顶部>代码>位置总是被设置为（<代码>父元素宽度 -<代码>子元素宽度 2）。这是我的密码
html
这是小提琴：

摆弄屏幕中央的红色：
这是我的尝试
代码：
css
html
是否需要4个div？试试这个：

HTML
我在Chrome和Firefox上进行了测试，效果很好，IE不支持圆角，但它是居中的。发布你的HTML和CSSPeeHaa，那么我如何将外壳居中？该包装中有一个映像“”所有这些都可以是相对的。请看我对这个问题的评论。为什么？如果div是嵌套的，则所有div都可以使用padding/margin来完成。没别的了。我怎么能把所有东西都放在红色的中央，包括屏幕中央的红色呢？嗯，但问题是我在使用图像，当我开始添加图像时，会发生不好的事情。看一下（）所以不要使用图像。你可以复制你想要的东西而不用它们，这意味着它是一个更轻的解决方案
<div id="red">
    <div id="grey">
        <div id="green">
            <div id="black">
            </div>
        </div>
    </div>
</div>

div
{
    border-radius:100%;
}

#red
{
    position:relative; 
    margin-left:auto;
    margin-right:auto; /** centers #red on screen **/
    background-color: #F00;
    width:400px; 
    height:400px;

}
#grey
{
    background-color:#CCC;
    position:absolute;
    top:20px;
    left:20px;
    width:360px; /** 400 - 360 = 40/2 = 20px for left and top **/
    height:360px;
}

#green
{
    background-color:#0E0;
    position:absolute;
    top:40px;
    left:40px;
    width:280px;
    height:280px;
}
#black
{
    background-color:#000;
    position:absolute;
    left:20px;
    top:20px;
    width:240px;
    height:240px;
}

div {overflow:hidden}
#first {
    background:red;
    width:400px;
    height:400px;
    border-radius:300px;}
#second {
    background:grey;
    height:95%;
    width:95%;
    border-radius:300px;
    margin:2.5%}
#third {
    background:green;
    height:70%;
    width:70%;
    border-radius:200px;
    margin:15%;}
#forth {
    background:black;
    height:95%;
    width:95%;
    border-radius:200px;
    margin:2.5%;}

<div id="first">
    <div id="second">
        <div id="third">
            <div id="forth"></div>
        </div>
    </div>
</div>

<div class="outer">
    <div class="inner"><div>
</div>


div{position:relative; margin:0 auto;}
.outer{width: 350px; height: 350px; background-color: gray; border-radius: 100%; border:10px solid red; vertical-align: middle;}
.inner{width: 200px; height: 200px; background-color: black; border-radius: 100%; border:10px solid green; top:60px;}