如何用css將我的對象放在我的頁面中心？

我無法在我的頁面正中央將div class「bubblewrap」居中。請告訴我如何。我目前使用的方法通常不起作用。如何用css將我的對象放在我的頁面中心？

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

<!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>

我認爲這個問題是我的定位，但不能肯定的事。

來源

2015-06-18 LinDan ChongWei

去工作margin:auto;定義它的width是解決方案之一。所以在你的情況下爲bubblewrap定義寬度屬性，那麼它必須工作。

來源

2015-06-18 04:03:59

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

.oddbubble { 
    margin: 0 auto; 
}

它會爲你工作。

JS-Fiddle

來源

2015-06-18 04:05:44

給寬度您.bubblewrap

.bubblewrap {寬度：31％} //根據您的需要

來源

2015-06-18 04:06:43

你可以試試這個太：

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

來源

2015-06-18 04:12:20

你只需要使用margin:0 auto;和width:**%。喜歡這個。這裏是jsfiddle

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

您可以根據您的需要更改寬度。

來源

2015-06-18 04:13:13 MKD

您可以對選擇器進行分組以減小css的大小。請看下面。

對於中心對準，用left: 50%; transform: translateX(-50%);爲.bubblewrap

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

<!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>

來源

2015-06-18 04:52:36

保證金自動將不具有絕對的位置工作。嘗試使用此代碼，但這種方式你必須將寬度設置爲.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; 
}

來源

2015-06-18 05:02:34

如何用css將我的對象放在我的頁面中心？

回答

相關問題