Home css Alignment Div block in the center

Alignment Div block in the center

Author

Date

Category

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%;
}

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions