[Solved] Centering not working properly in some browsers

[Max]

My site here: http://pitfarmtennis.co.uk/cms/ fails to center elements properly in some browsers, for example:

Chrome: Works
Safari 8: Doesn’t work
Safari 9: Works
Safari iPad: Doesn’t work
Samsung Galaxy tablet: Doesn’t work
Below are some images of it working and not working – any ideas of why this is please? My understanding was that I has implemented a cross-browser solution for centring, supporting even ie8!

Images: http://1drv.ms/1LPj8be

Here is how I am currently centering items:

.home-section-1 {
height: 600px;
position: relative;
}

.home-section-1-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
@include no_select;
width: 99%;
}

Thanks for your help!

[Max]

@Shikkediel that is really great, thank you. Does anybody know an ie8 fallback please?

[Max]

Hi @Beverleyh thanks for the reply – much appreciated. Sadly however the site features many elements with heights and widths as %s – which I guess this wouldn’t work for.

Many thanks for you help.

[Max]

Thanks for the reply @Shikkediel – I like that example. Anything for relatively positioned elements please (that is cross browser inc. ie8?)

Many thanks

[Max]

That’s great info thanks very much guys :))

[Author]

Posts