Greetings to everyone again for today.
There is a property from Div, which in CSS looks like this:
. Window {Display: None; Position: Fixed; Align: Center; width: 50%; Left: 25%; Top: 100px; Border: 0px Solid # 888888; z-index: 10; }
When you press certain buttons on the page – this unit appears, i.e. It is no longer display: none;
But because All monitors are different – the unit has different widths. How can it be aligned in the center? I tried to prescribe so, but did not work:
. Window {Display: None; Position: Fixed; Align: Center; Text-Align: Center; Top: 100px; Border: 0px Solid # 888888; z-index: 10; }
Answer 1, Authority 100%
. Centered {
Position: Fixed;
Top: 50%;
Left: 50%;
margin-top: -50px;
margin-left: -100px;
}
Mardzhina should be half less than height and width of the block.
Top and Left should always be 50%. This method is described by here .
If the width and height of the block is unknown, then you can do this:
$ (document) .ready (Function (E) {
var win = $ ('window');
Win.css ({
'margin-top': '-' + (win.Height () / 2) + 'px',
'margin-left': '-' + (win.width () / 2) + 'px'
});
});
By the way. I did not notice that you have a width in percent. If so then you can margin, too, set in percent and then this script will not need.
Answer 2, Authority 200%
If the block sizes are set by percentages:
. Window {
width: 50%;
Height: 20%;
Position: Absolute;
Left: 25%;
Right: 25%;
TOP: 40%;
Bottom: 40%;
}