Question

您好我正在尝试使用CSS垂直和水平对齐4个div，但没有任何对我有效。

请帮帮我！提前致谢

我的CSS请注意这只是我试过的一种方法我已经坐在这里大约2个小时弄乱了这个并且无法解决这个问题。

* {
    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>

Answer 1

这是我的尝试http://dabblet.com/gist/4013306

代码：

CSS

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%;}

HTML

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

Answer 2

尝试在容器上使用position: relative;，并在具有合适position: absolute;和left值的圈子上top将它们放在中间位置。

Answer 3

嗯，您可以在内部div中使用绝对定位，其中left和top位置始终设置为（Parent element width - child element width / 2）。这是我的代码

HTML

<div id="red">
    <div id="grey">
        <div id="green">
            <div id="black">
            </div>
        </div>
    </div>
</div>

CSS

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;
}

这是小提琴：

http://jsfiddle.net/brunovieira/pmN4z/

在屏幕上以#red为中心：

http://jsfiddle.net/brunovieira/pmN4z/2/

Answer 4

它需要4个div吗？试试这个：

http://jsfiddle.net/vSyWZ/2/

HTML

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

CSS

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;}

我在Chrome和Firefox上测试过并且工作正常，IE不支持圆角但是它居中。

几个带圆角的嵌套DIV

4 个答案: