Center fixed div with dynamic width (CSS)

gubbfett

I have a div that will have this CSS:

#some_kind_of_popup
{
    position: fixed;
    top: 100px;
    min-height: 300px;
    width: 90%;
    max-width: 900px;
}

Now, how can i make this div centered? I can use margin-left: -450px; left: 50%; but this will only work when the screen is > 900 pixels. After that (when the window is < 900 pixels), it will no longer be centered.

I can of course do this with some kind of js, but is there a "more correct" of doing this with CSS?

laconbass

You can center a fixed or absolute positioned element setting right and left to 0, and then margin-left & margin-right to auto as if you were centering a static positioned element.

#example {
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
}

See this example working on this fiddle.

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Dynamic width DIV at center of parent

分類Dev

CSS transition div width from center

分類Dev

how to align center to page of which child div has some fixed width

分類Dev

Center a dynamic <div> on screen

分類Dev

Horizontally center MatDialog with 100% width and fixed maxWidth

分類Dev

CSS: Cannot center a div

分類Dev

Unable to center div horizontally, position fixed involved

分類Dev

Set a Fixed div to 100% width of the parent container

分類Dev

Set a Fixed div to 100% width of the parent container

分類Dev

Make CSS FlexBox take fixed column width

分類Dev

css div won't center

分類Dev

100% Div with centered, fixed-width inner Div

分類Dev

horizontal div images scroll dynamic width

分類Dev

How do I center this horizontal list within a fixed div?

分類Dev

How do I set a Fixed Height and Width to a div

分類Dev

How to place images side by side within a fixed width div

分類Dev

Is there a way of keeping width and height of the div fixed when added padding?

分類Dev

How to make fixed header table with table and cell width in percents in CSS?

分類Dev

CSS - Div get remainder width space of parent

分類Dev

CSS: position absolute varying the div width

分類Dev

Reducing the width of div moves to left side in css

分類Dev

Is it possible to center-align content within a div only when the device width is under a certain width in Bootstrap?

分類Dev

Center a position:fixed element

分類Dev

Center a position:fixed element

分類Dev

Center a position:fixed element

分類Dev

CSS, overlap children div but the width of parent div stay the same

分類Dev

Height equal to dynamic width (CSS fluid layout) + Expand to contain overflow

分類Dev

Fixed Table Cell Width

分類Dev

Three column layout - middle one dynamic width, other two fill up the rest of the container and center the middle one

Related 関連記事

  1. 1

    Dynamic width DIV at center of parent

  2. 2

    CSS transition div width from center

  3. 3

    how to align center to page of which child div has some fixed width

  4. 4

    Center a dynamic <div> on screen

  5. 5

    Horizontally center MatDialog with 100% width and fixed maxWidth

  6. 6

    CSS: Cannot center a div

  7. 7

    Unable to center div horizontally, position fixed involved

  8. 8

    Set a Fixed div to 100% width of the parent container

  9. 9

    Set a Fixed div to 100% width of the parent container

  10. 10

    Make CSS FlexBox take fixed column width

  11. 11

    css div won't center

  12. 12

    100% Div with centered, fixed-width inner Div

  13. 13

    horizontal div images scroll dynamic width

  14. 14

    How do I center this horizontal list within a fixed div?

  15. 15

    How do I set a Fixed Height and Width to a div

  16. 16

    How to place images side by side within a fixed width div

  17. 17

    Is there a way of keeping width and height of the div fixed when added padding?

  18. 18

    How to make fixed header table with table and cell width in percents in CSS?

  19. 19

    CSS - Div get remainder width space of parent

  20. 20

    CSS: position absolute varying the div width

  21. 21

    Reducing the width of div moves to left side in css

  22. 22

    Is it possible to center-align content within a div only when the device width is under a certain width in Bootstrap?

  23. 23

    Center a position:fixed element

  24. 24

    Center a position:fixed element

  25. 25

    Center a position:fixed element

  26. 26

    CSS, overlap children div but the width of parent div stay the same

  27. 27

    Height equal to dynamic width (CSS fluid layout) + Expand to contain overflow

  28. 28

    Fixed Table Cell Width

  29. 29

    Three column layout - middle one dynamic width, other two fill up the rest of the container and center the middle one

ホットタグ

アーカイブ