0

For some reason, whatever I try, I can't get this div to center. I've been researching probably for about an hour and can't seem to find something that will get it to center.

Here's what it looks like right now: http://niil.me/

and here's the CSS:

.primary-container {
  position: absolute;
  width: 294px;
  min-height: 110px;
  background: #transparent;
  z-index: 300000;
  left: 50%;
  top: 50%;
  margin-left: auto;
  margin-right: auto;
}

EDIT: Guess I didn't research hard enough. Sorry!

nil
  • 45
  • 7

5 Answers5

2

Try to add this to your css:

-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
Johan Pranata
  • 317
  • 2
  • 9
1

add transform: translateX(-50%); then it will be in center

Adnan Akram
  • 641
  • 3
  • 11
0

You have to consider the width while setting the left. Set the left to

left: calc(50% - 148px);

Araknid
  • 476
  • 4
  • 10
0
   body{

padding-top: 12%;
}

.primary-container {

  width: 294px;
  min-height: 110px;
  background: #transparent;
  z-index: 300000;
  left: 50%;
  top: 50%;
  margin-left: auto;
  margin-right: auto;
}

try this

Ahsan Aziz Abbasi
  • 168
  • 13
0

Can you please try below css code:

.primary-container {
    float: left;
    margin: 0 auto;
    min-height: 110px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
    z-index: 300000;
}
Mukesh Panchal
  • 1,956
  • 2
  • 18
  • 31