Position element in middle of screen using CSS

Question

After my website was completed, everyday I am trying to modify things that would make it more responsive. It's made in Muse so don't expect much of "responsiveness".

I have an element with this class:

#labelstrong
 {
    z-index: 17;
    width: 633px;
    background-color: transparent;
    color: #FFFFFF;
    text-align: justify;
    position: fixed;
    top: 1542px;
    left: 164px;
 }

Normally, the element is in the middle of the screen. But when I zoom out, the element maintains the same distance to the top of the screen (because of the top attribute of course). How can I define its position in a way that even if I zoom in or out it will still be in the middle of the screen.

UPDATE: The problem is (and I forgot to mention it) that the position must be fixed as there is an horizontal scrolling feature for all elements ( they come from the right of the screen) and so they have to be on a fixed position.

UPDATE 2: Here is a live example. Imagine that the class is applied on each TAG (not the menu of course).

http://2323029s8s8s8.businesscatalyst.com/index.html

Place the label with fixed position and greater zindex outside the horisontally scrollable element. — Rauli Rajande, Jan 24 '15 at 22:14
@Ricky the issues is with the big tags that slide along as you scroll? — RGLSV, Jan 24 '15 at 22:35
Yes. As you can see in the link .. While zooming out the remain in a fixed position near to the top. I wan to keep the position:fixed but keep them in the middle. :( — Ricky, Jan 24 '15 at 22:36
If anyone wants I can export this website in html. I don't expect you to write the code. No way . Just to see how is going to be achieved as muse has a bad markup language. — Ricky, Jan 24 '15 at 22:38

RGLSV · Accepted Answer · 2015-01-24T23:19:09.397

3

You can add for those big tags the following css:

.fixed-big-tag{
   top: 50%;
   transform: translateY(-50%);
}

Also as a counter measure, make sure the <body> and the <html> have 100% heights

Another idea would be to use the !important rule for the top property to overwrite what Muse outputs.(or any rule that needs to be overwritten)

If it works, you could probably add a new class on all these tags that need to be centered and overwrite it via css

Check it out, and let me know how it goes.

edited Jan 24 '15 at 23:19

answered Jan 24 '15 at 22:40

RGLSV

2,018
1
22
37

Thanks I tried it but it didn't work. Muse defines 100% in a different way. CSS: body { position: relative; min-width: 960px; padding-top: 36px; padding-bottom: 36px; } – Ricky Jan 24 '15 at 22:55
#page { z-index: 1; width: 960px; min-height: 4940px; background-image: none; border-style: none; border-color: transparent; background-color: transparent; padding-bottom: 0px; margin-left: auto; margin-right: auto; } – Ricky Jan 24 '15 at 22:56
Muse.Utils.fullPage('#page');/* 100% height page */ – Ricky Jan 24 '15 at 22:56
@Ricky cant you define some sort of a class to set on all those tags? and if so, you could overwrite what it outputs, by including it in a css or via inline styling? – RGLSV Jan 24 '15 at 22:57
like setting inside that class: top: 50% !important – RGLSV Jan 24 '15 at 22:59
You mean assign a new class on these tags and add the !important ? – Ricky Jan 24 '15 at 23:02
About editing the css file. Of course this is all about. I've exported my website in HTML and I am trying to modify it. That class as seen in the post is defined in MUSE css exported file. – Ricky Jan 24 '15 at 23:07
I think you're the winner here. SOlution was : delete the old class. Add a new one. Replace all instances of the old one with the new in the html code. and add !important to top and transform. Please provide this as a new anwer so I can "award" you as a winner. Thank you so much :) – Ricky Jan 24 '15 at 23:14

Nate Barbettini · Answer 2 · 2015-01-24T22:12:45.880

1

See this resource for techniques to centering elements using CSS: Centering in CSS: A Complete Guide

If you create a relatively-positioned parent container element, you can center your child element easily:

.parent {
  position: relative;
}

#labelstrong {
  z-index: 17;
  background-color: transparent;
  color: #FFFFFF;
  text-align: justify;
  position: absolute;

  width: 634px;
  height: 40px;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -317px;
}

Note that the margin offsets are half of the width and height.

edited Jan 24 '15 at 22:12

answered Jan 24 '15 at 22:07

Nate Barbettini

51,256
26
134
147

Thanks I've already seen this. The problem is (and I forgot to mention it) that the position must be fixed as there is an horizontal scrolling feature for all elements ( they come from the right of the screen) and so they have to be on a fixed position. Is there any way with fixed position? – Ricky Jan 24 '15 at 22:10
Can you post a fiddle with an example of your layout? – Nate Barbettini Jan 24 '15 at 22:12
Well it's impossible to do this on a Jsfiddle. I can create a temp site on adobe business catalyst and post it here. It won't take time. What you think? – Ricky Jan 24 '15 at 22:15
If the other posted answers didn't work for you either, then yes go for it. – Nate Barbettini Jan 24 '15 at 22:20
Check the link please (see the post) – Ricky Jan 24 '15 at 22:27

score 0 · Answer 3 · answered Jan 24 '15 at 22:12

0

Try using percentages instead of pixels, like:

top: 10%;

If you want to horizontally center, try setting the margin to auto:

margin: 0 auto;

Your code would look like this:

#labelstrong {
    z-index: 17;
     width: 633px;
     background-color: transparent;
     color: #FFFFFF;
     text-align: justify;
     position: relative;
     top: 10%;
     margin: 0 auto;
}

Take a look at this example: http://jsfiddle.net/5a6fyb21/

answered Jan 24 '15 at 22:12

Estevan Maito

1,482
1
19
23

No. I tried this. it doesn't work. position must be fixed (we can't change this). Thanks though – Ricky Jan 24 '15 at 22:14
Why don't you use float instead? All items would be next to each other. But I can't imagine if you don't give us an example of your code. – Estevan Maito Jan 24 '15 at 22:17
@Ricky http://stackoverflow.com/questions/2861247/center-aligning-a-fixed-position-div – hapass Jan 24 '15 at 22:26
Check the link please (see the post) – Ricky Jan 24 '15 at 22:27

score 0 · Answer 4 · answered Jan 24 '15 at 22:19

jQuery would be your best bet.

I would just set your class to a fixed position then try using the following.

$(window).resize(function() {    
var middle = $(window).height();
$('.middle').css('top', hello / 2);
});

The resize function is used so that it will remain in position if the window is resized.

score 0 · Answer 5 · answered Jan 24 '15 at 22:19

0

Centered label over horisontally scrollable content:

http://jsfiddle.net/cqztf9kc/

.fixed {
    margin: 50%;
    position: fixed;
    z-index: 1;
}

.content {
    x-overflow: scroll;
    height: 100%;
}

answered Jan 24 '15 at 22:19

Rauli Rajande

2,010
1
20
24

Position element in middle of screen using CSS

5 Answers5