How to Get the Exact Middle of a Screen, Even When Re-Sized

How to get the EXACT middle of a screen, even when re-sized

From the sounds of what you are saying, I think you misunderstand what the dimensions of a normal (decorated) frame include.

A JFrame consists of a window/frame (normally decorated with a border), a JRootPane, which contains a JLayeredPane which contains the content pane, JMenuBar and glass pane.

This is, one of the, reasons why you should never override a top level containers paint method, because you won't actually be painting within the content/view area.

So, the actual "paintable" region of a frame is it's width - border.width x height - border.height

The red line indicates the frame, the blue indicates the content pane.

This raises a very important question, where's the center of the frame? From the frames perspective, it's 100x100, but from the content pane's perspective, it's 92x81. Depending on what you want, will depend on which value you will use. For positioning the frame, you will want to to use the frames center point, for painting, your will want to use the content panes.

Now, the easiest way to center a frame on the screen is simply to call Window#setLocationRelativeTo(null) otherwise, I would suggest you use Timr's solution ;)

Resize and center an image on the screen without knowing dimensions using CSS

I finally came up with a solution, the problem is that it is using the flexbox display which is unavailable to I.E. users.
But for me it's an acceptable solution since I mostly need a solution working with Chromium. Even if an universally working CSS would be better.

.image-container {

  width: 100vw;

  height: 100vh;

  display: flex;

}

.image-container img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  object-position: center; /* normally it's the default value */

}

<div class="image-container"><img src="http://lorempixel.com/200/400/sports"></div>

Center an element in a fixed position on a resizable background

Using a combination of display:table-cell and vertical-align:center will center your image vertically. In addition, you can simply use text-align:center to center your image horizontally.

http://jsfiddle.net/reinmcha/XtQ37/10/

Might need to do a little adjusting to keep the background div centered. So, we add another div and set to display:table. The "table cell" will fill the whole thing. Now we center the table with margin: 0 auto.

Final Product:

http://jsfiddle.net/reinmcha/XtQ37/20/

Might need to do some updating to get the image to center perfectly with the border (since it has width...)

Here's my go at it.

I hope you are aware there are tons of articles on this topic. Search around. You'll find your answer :)

Centering absolute positioned DIV even after window re-size (for responsive design)

Center the box using CSS (source), then adapt the width and the margin-left in you media queries:

#box {
    position:absolute;
    border:1px solid red;
    width:760px;
    height:30px;
    background:yellow;
    left: 50%;
    margin-left:-380px; /* half of the box */
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
    #box {
        background:pink;
    }
}
@media only screen and (min-width: 480px) and (max-width: 767px)  {
    #box {
        width:460px;
        background:black;
        margin-left:-230px;
    }
}
@media only screen and (min-width: 321px) and (max-width: 479px)  {
    #box {
        width:300px;
        background:blue;
        margin-left:-150px;
    }
}
@media only screen and (max-width: 320px) {
    #box {
        background:grey;
    }
}

Demo here, drag the inner frame boundary to „simulate device sizes“: http://jsfiddle.net/hD657/3/

Solution based on your JavaScript: http://jsfiddle.net/NnDvs/

---

Answer to your comment:

margin-left is calculated based on the width of the box, so this is independent on any viewport or window width. I guess from your comment that your box is just off by some pixels (you should state that more clearly so we can help better). jQuery's width will return the width "without" the scrollbar, so it changes based on the height of the contents (i.e. if there is a scrollbar or not). You could try to "hide" the scrollbars temporary before getting the width: document.body.style.overflow = "hidden";. But in general, I would say that the returned value of .width() should be what you are looking for. Is this what you are looking for?

Center a 'div' in the middle of the screen, even when the page is scrolled up or down?

Change the position attribute to fixed instead of absolute.

Positioning div element at center of screen

The easy way, if you have a fixed width and height:

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}​

Please don't use inline styles! Here is a working example http://jsfiddle.net/S5bKq/.

Center panel when window resized

I'd nest layouts.

import java.awt.*;
import javax.swing.*;
import javax.swing.border.EmptyBorder;
import javax.swing.border.TitledBorder;

public class ThreeButtonTextFieldCombo {

    private JPanel ui = null;

    ThreeButtonTextFieldCombo() {
        initUI();
    }

    public final void initUI() {
        if (ui!=null) return;
        ui = new JPanel(new GridBagLayout());
        ui.setBorder(new TitledBorder("Parent Panel"));

        JPanel controls = new JPanel(new GridLayout(1,0,10,10));
        ui.add(controls);
        controls.setBackground(Color.RED);
        controls.setBorder(new TitledBorder("Child Panel"));

        for (int ii=1; ii<4; ii++) {
            addLabelAndField(controls, "String " + ii);
        }
    } 

    public JComponent getUI() {
        return ui;
    }

    private void addLabelAndField(JPanel panel, String text) {
        JPanel controls = new JPanel(new BorderLayout(3, 3));
        controls.setBorder(new EmptyBorder(20,20,20,20));
        JLabel l = new JLabel(text);
        controls.add(l, BorderLayout.PAGE_START);

        JTextArea ta = new JTextArea(text, 2, 8);
        controls.add(new JScrollPane(ta));

        panel.add(controls);
    }

    public static void main(String[] args) {
        Runnable r = new Runnable() {

            @Override
            public void run() {
                JFrame f = new JFrame("Three Button/Text Field Combo");
                f.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
                f.setLocationByPlatform(true);
                ThreeButtonTextFieldCombo tbtfc = 
                        new ThreeButtonTextFieldCombo();
                f.setContentPane(tbtfc.getUI());
                f.pack();
                f.setMinimumSize(f.getSize());
                f.setVisible(true);
            }
        };
        SwingUtilities.invokeLater(r);
    }
}

How to set page content to the middle of screen?

I'm guessing you want to center the box both vertically and horizontally, regardless of browser window size. Since you have a fixed width and height for the box, this should work:

Markup:

<div></div>

CSS:

div {
    height: 200px;
    width: 400px;
    background: black;

    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;
}

The div should remain in the center of the screen even if you resize the browser. Just replace the margin-top and margin-left with half of the height and width of your table.

Edit: Credit goes to CSS-Tricks, where I got the original idea.

---

Related Topics