CODEWITHSUNDEEP
htmlcssbuttoncenter
Dawid Motylski
Dawid Motylski

Reputation: 23

How to make the center point of a button appear on center, not on the left of the element?

I'm having problem with making the button appear on the center of screen. The button is supposed to be in the center of the screen, but somehow my css is making in that the center of the button is at the left top corner. Any one know why? Some more details: I want it to be like this: how it should look

But instead it looks like this: how it looks

Anyone can help? Here is the code:

html, body {margin: 0; height: 100%; overflow: hidden}
img 
{ 
    max-width: 100%; 
    height: auto;
    position: relative;
    top: 33%;
    
}
.obj1
{
    width: 20%;
    height: 100%;
    background: rgb(136, 44, 44);
    float:left;
    position: relative;
}
.obj2
{
    width: 20%;
    height: 100%;
    background: rgb(255, 255, 255);
    position: relative;
    float:left;
}
.obj3
{
    width: 20%;
    height: 100%;
    background: rgb(0, 0, 0);
    position: relative;
    float:left;
}
.obj4
{
    width: 20%;
    height: 100%;
    background: rgb(42, 75, 148);
    position: relative;
    float:left;
}
.obj5
{
    width: 20%;
    height: 100%;
    background: rgb(72, 114, 48);
    position: relative;
    float:left;
}
.obj6
{
    width: 20%;
    height: 100%;
    background: rgb(119, 39, 112);
    position: relative;
    float:left;
}
#show-more
{
    background: #1594e5;
    color: #fff;
    font-family: calibri; 
    display: block;
    width: 140px;
    font-size: 24px;
    text-transform: uppercase;
    padding: 10px;
    text-align: center;
    margin: 20px auto;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)        
}
<body>

    <div class="obj1">
      
    </div>
    <div class="obj2">
        
    </div>
    <div class="obj3"></div>
    <div class="obj4"></div>
    <div class="obj5"></div>
    <a id="show-more">Show More</a>

</body>

Upvotes: 1

Views: 46

Answers (1)

zdolny
zdolny

Reputation: 1109

Using position absolute and top/left you point to a top-left corner of the element. Additionally use transform: translate(-50%, -50%); to move the button to top and left of 50% of his height/width

Upvotes: 1

Related Questions