CSS & PHP –> how to center a div container

Hi,

another day another problem. I recently installed a theme for the cyclone slider 2 plugin and I want to center the controls below the image. I don’t get it working :/

I’ve figured out a solution but that’s not satisfying 🙁

here the files:
[Unnecessary PHP removed]

CSS file

/*** Template Controls ***/
.cycloneslider-template-controls{
	z-index:2;
}
.cycloneslider-template-controls img{
    display:block;
}
.cycloneslider-template-controls .cycloneslider-controls{
    position: absolute;
	left: 42%;
    bottom:-27px;
    z-index:102;
    padding:5px 0;
    height:16px;
}
.cycloneslider-template-controls .cycloneslider-controls-inner{
    padding:0 20px;
}
.cycloneslider-template-controls .cycloneslider-play-pause{
    display:block;
    float:right;
    margin:0 10px;
    width:14px;
    height:16px;
    background: url($tpl/images/sprite-controls.png) no-repeat -118px -3px;
    text-indent:-99999px;
    cursor:pointer;
}

.cycloneslider-template-controls .cycloneslider-play-pause:hover{
    background-position:-118px -25px;
}
.cycloneslider-template-controls .cycloneslider-play-pause.play{
    background-position:-61px -3px;
}
.cycloneslider-template-controls .cycloneslider-play-pause.play:hover{
    background-position:-61px -25px;
}
.cycloneslider-template-controls .cycloneslider-prev,
.cycloneslider-template-controls .cycloneslider-next{
    display:block;
    float:right;
    width:18px;
    height:16px;
    background: url($tpl/images/sprite-controls.png) no-repeat;
    text-indent:-99999px;
}
.cycloneslider-template-controls .cycloneslider-prev{
    background-position:-2px -3px;
    margin-left:7px;
}
.cycloneslider-template-controls .cycloneslider-next{
    background-position:-173px -3px;
}
.cycloneslider-template-controls .cycloneslider-prev:hover{
    background-position:-2px -25px;
}
.cycloneslider-template-controls .cycloneslider-next:hover{
    background-position:-173px -25px;
}
.cycloneslider-template-controls .cycloneslider-pager{
    float:right;
    height:16px;
    overflow:hidden;
}
.cycloneslider-template-controls .cycloneslider-pager span {
    display: block;
    float:left;
    margin: 0 3px;
    width: 15px;
    height: 16px;
    background: url($tpl/images/sprite-controls.png) no-repeat -235px -3px;
    text-indent: -99999px;
    font-size: 0;
    line-height: 0;
    opacity:0.3;
}
.cycloneslider-template-controls .cycloneslider-pager span.cycle-pager-active{
    background-position:-235px -25px;
    opacity:1;
}
.cycloneslider-template-controls .cycloneslider-caption{
    position:absolute;
    bottom:0;
    left:10%;
    z-index:99;
    width:50%;
    height:40%;
    color:#fefefe;
}
.cycloneslider-template-controls .cycloneslider-caption-title{
    display:inline-block;
    margin-bottom:5px;
    padding:10px 5px;
    background: url($tpl/images/bg-caption.png);
    text-transform:uppercase;
    font-size:20px;
    line-height:1;
}
.cycloneslider-template-controls .cycloneslider-caption-description{
    padding: 5px;
    background: url($tpl/images/bg-caption.png);
    font-size:12px;
    line-height:1.5;
}

/* Optimized for Mobile Devices */
@media (max-width: 480px) {
	.cycloneslider-template-controls .cycloneslider-controls{
        width:100%;
        right:0;
    }
    .cycloneslider-template-controls .cycloneslider-next{
        margin-right:10px;
    }
    .cycloneslider-template-controls .cycloneslider-caption{
        left:0;
        bottom:0;
        height:auto;
        width:100%;
    }
    .cycloneslider-template-controls .cycloneslider-caption-title{
        display:block;
        margin-bottom:0;
    }
    .cycloneslider-template-controls .cycloneslider-pager{
        max-width:50%;
        float:left;
    }
}

any help would be appreciated 🙂