CODEWITHSUNDEEP
htmlcss
LinDan ChongWei
LinDan ChongWei

Reputation: 193

how to place my object in the center of my page with css?

I can't get to center my div class "bubblewrap" at the very center of my page. Please show me how. The current method I use which usually works does not work now. 

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>

I think the problem is to do with my positioning but not sure.

Upvotes: 0

Views: 112

Answers (7)

Tharaka Arachchige
Tharaka Arachchige

Reputation: 807

Margin auto will not work with the absolute position. Try using this code but this way you have to set the width to .bubblewrap class. 

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

This method can use to center object vertically too. Like bellow example

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

Upvotes: 0

Felix A J
Felix A J

Reputation: 6490

You can group the selectors to reduce the size of css. Please see below.

For center aligning, used left: 50%; transform: translateX(-50%); for .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>

Upvotes: 0

Manoj Dhiman
Manoj Dhiman

Reputation: 5166

you just need to use margin:0 auto; and width:**% . like this . Here is the jsfiddle

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

you can change width according to your need.

Upvotes: 0

Neel Desai
Neel Desai

Reputation: 3

you can try this too:

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

this might help you more: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Upvotes: 0

danish farhaj
danish farhaj

Reputation: 1354

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

.oddbubble {
    margin: 0 auto;
}

It will work for you.

JS-Fiddle

Upvotes: 2

Suraj Rawat
Suraj Rawat

Reputation: 3763

Give width to your .bubblewrap

.bubblewrap{width:31%} //according to your need

Upvotes: 0

Suman KC
Suman KC

Reputation: 3528

to work margin:auto; defining its width is one of the solution. So in your case define width property for bubblewrap then it must work.

Upvotes: 0

Related Questions