0

I want to center exactCenter div to the exact center of the page. I'm using bootstrap. I tried as below but due to the dynamic width (I need the width to be dynamic), I do not know how to center it to the exact center of the page?

I created a Fiddle

<div class="wrapper row">
    <div class="col-xs-12 col-sm-6 col-md-4 exactCenter">Test</div>
</div>

css:

.wrapper{
    width: 100%;
    height: 100%;
    position: fixed; 
}
.exactCenter {
    position: fixed; 
    background-color: #00FF00; 
    top: 50%; 
    left: 50%; 
    text-align: center;
    /*margin-top: -15%; 
    margin-left: -30%; */
}

Edit:

I want to avoid transform: translate(-50%, -50%); - sometimes text are blurry.

All answers I googled had a fixed width and height (inner div). But in my case the width and height is dynamic.

Becky
  • 5,467
  • 9
  • 40
  • 73
  • Just add `transform: translate(-50%, -50%);` to `.exactCenter` http://jsfiddle.net/o0h5ptv6/3/ – Nenad Vracar Nov 27 '15 at 13:04
  • @NenadVracar Thanks. :) I want to avoid `transform: translate()`. Cos it makes the text blurred on some occations. I'm looking for an alternative solution without `transform: translate()`. – Becky Nov 27 '15 at 13:05
  • But you want to use `position: fixed;` ? – Nenad Vracar Nov 27 '15 at 13:06
  • I think this should fix that blurriness you speak of `-webkit-font-smoothing: subpixel-antialiased; -webkit-transform: translate(-50%, -50%);` http://jsfiddle.net/o0h5ptv6/7/ – Nenad Vracar Nov 27 '15 at 13:18
  • @NenadVracar Thanks. I saw those solutions when I googled. But did not work for me. So I'm finding a simple solution as 'Darren Sweeney' has suggested. – Becky Nov 27 '15 at 13:21

1 Answers1

0

Try this:

.exactCenter {
    position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 100px;
  background-color: #ccc;
  border-radius: 3px;
}

There's lot of different ways to do it - this is just a simple example

StudioTime
  • 22,603
  • 38
  • 120
  • 207
  • As I mentioned, the width is dynamic. I'm using bootstrap's col width. So using `width: 200px; height: 100px;` won't work for me. – Becky Nov 27 '15 at 13:11