Question

我无法集中我的div级＆＃34; bubblewrap＆＃34;在我的页面的中心。请告诉我如何。我现在使用的当前方法通常不起作用。

＆＃13;

body {
    background-color: black;
}

.bubble
{
    position: relative;
    width: 200px;
    height: 70px;
    padding: 0px;
    background: #FFFFFF;
    -webkit-border-radius: 0px;
    -moz-border-radius:0px;
    border-radius: 0px;
    margin-left:10px;
    margin-top:10px;

}

.bubble:after
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 9px 16px 9px 0;
    border-color: transparent white;
    display: block;
    width: 0;
    z-index: 1;
    left: -16px;
    top: 26px;
}

.oddbubble
{
    position: relative;
    width: 200px;
    height: 70px;
    padding: 0px;
    background: #FFFFFF;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin-top:10px;
}

.oddbubble:after
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 9px 0 9px 16px;
    border-color: transparent #FFFFFF;
    display: block;
    width: 0;
    z-index: 1;
    right: -16px;
    top: 26px;
}

.bubblewrap {
    margin:auto;
    position:absolute;
    top:0; bottom:0; left:0; right:0;
}

＆＃13;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="bubble.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="bubblewrap">
<div class="bubble"></div>
<div class="oddbubble"></div>
<div class="bubble"></div>
<div class="oddbubble"></div>
</div>
</body>
</html>

＆＃13;

我认为问题与我的定位有关但不确定。

Answer 1

.bubble {
    margin: 0 auto;
    margin-top: 12px;
    margin-bottom: 12px;
}

.oddbubble {
    margin: 0 auto;
}

它适用于你。

JS-Fiddle

Answer 2

工作margin:auto;定义其width是其中一种解决方案。所以在你的情况下定义bubblewrap的宽度属性然后它必须工作。

Answer 3

为.bubblewrap

指定宽度

.bubblewrap {width：31％} //根据您的需要

Answer 4

你也可以试试这个：

.centered {
    position: fixed; /* or absolute */
    top: 50%;
    left: 50%;
}

这可能对您有所帮助：https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Answer 5

您只需使用margin:0 auto;和width:**%即可。像这样。这是jsfiddle

.bubblewrap {
  margin: 0 auto;
  width: 33%;
}

您可以根据需要更改宽度。

Answer 6

您可以对选择器进行分组以减小css的大小。请参阅下文。

对于居中对齐，left: 50%; transform: translateX(-50%);使用了.bubblewrap

＆＃13;

body {
    background-color: black;
}

.bubble, .oddbubble
{
    position: relative;
    width: 200px;
    height: 70px;
    padding: 0px;
    background: #FFFFFF;
    -webkit-border-radius: 0px;
    -moz-border-radius:0px;
    border-radius: 0px;
}
.bubble{
    margin-left:10px;
    margin-top:10px;
}
.oddbubble
{
    margin-top:10px;
}
.bubble:after, .oddbubble:after
{
    content: '';
    position: absolute;
    border-style: solid;
    border-color: transparent white;
    display: block;
    width: 0;
    z-index: 1;
    top: 26px;
}
.bubble:after{
    border-width: 9px 16px 9px 0;
    left: -16px;
}
.oddbubble:after
{
    border-width: 9px 0 9px 16px;
    right: -16px;
}
.bubblewrap {
    margin:auto;
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
}

＆＃13;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="bubble.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="bubblewrap">
<div class="bubble"></div>
<div class="oddbubble"></div>
<div class="bubble"></div>
<div class="oddbubble"></div>
</div>
</body>
</html>

＆＃13;

Answer 7

保证金自动无法与绝对位置一起使用。尝试使用此代码，但这样您必须将宽度设置为.bubblewrap类。

.bubblewrap {
    margin:auto;
    position:absolute;
    left:50%;
    margin-left:-108px;
    width:216px;
}

此方法也可用于垂直居中对象。像下面的例子

实施例： JS Fiddle

.center{
    width:200px;
    height:200px;
    color:#000;
    background:#ffee22;
    position:absolute;
    left:50%;
    top:50%;
    margin-top:-100px;
    margin-left:-100px;
    text-align:center;
}

如何用css将我的对象放在我的页面中心？

7 个答案: