How to center a child div with a smaller parent div


Tags: html,css

Problem :

I have a div (fixed) which acts like a pop up:

<body>
    <div class="popup-container">
        <div class="popup-item">
            Yolowing
        </div>
    </div>
</body>

This css allows the container to be horizontally centered (having a 100% width makes everything behind it unclickable; thus, I set it to 1px):

.popup-container {
    position: fixed;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 1px;
    z-index: 9999;
}

.popup-item {
    display: block;
    min-width: 20px;
    padding: 25px 50px;
    background-color: yellow;
}

However, I am unable to center .popup-item due to the parent element .popup-container being smaller than its child. How do I center .popup-item while still being able to click it (pointer-events: none entirely disabled it)?



Solution :

Vote to Close almost has it, but with the 1px width, the element doesn't get centered.

Do this instead:

.popup-container {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 9999;
    text-align:center;
    height:0px;
}

.popup-item {
    display: inline-block;
    min-width: 20px;
    padding: 25px 50px;
    background-color: yellow;
}

This will make it centered, because the container is 100% wide. However, pointer-events:none; will allow you to click through to anything below it.


    CSS Howto..

    How to prevent the jump during css transition?

    How to position two images in opposite corners of one div

    How to create an div background that is not affected by page zoom with CSS

    How to detect the form is blank or not by jQuery

    how to apply div on hover my table td

    How to avoid css overlapping?

    How to make two separate, independent columns (using html and css)

    How to include border-radius.htc in MVC architecture to make border-radius work in IE

    How to apply css for a class within h2?

    My slideshow only cycles through one picture

    Only Lower Half Of The Border Is Shown

    How to work with boxes? Html Css

    How does this wheel menu get the name

    How to include image into css file using JSF tag

    How to get a asp:Panel's CSS Class in code-behind after it has changed by CSS

    CSS how to get the: a img on top, insted of the first a href “”without floating

    I found another way of doing this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> ul {list-style: none; margin: 0; padding: 0;} li {position: relative; overflow: hidden;} a {display: block;}...
    Read more

    CSS - How to add a glow effect around a fluid box?

    How do I style JUST the reflection of the content without affecting its original source?

    How can I group DIVs in my document so I can apply CSS to them?

    How to change the position of Dynamic View's Search bar to the left (CSS CODE)

    How can I change css for every DOM object in the page in SAPUI5

    jQueryUI show/hide animation issue with child nodes

    How to change text from black to white upon hover on background black?

    How to CSS style angular directive?

    How do I hide the li's that don't fit on a single line?

    How to add media='screen' in css using cakePHP?

    How to make a horizontal list start in the center of the page?

    How to modify twitter bootstrap “.icon-bar” colors

    ABBR tooltip CSS styling: How to suppress original tooltip, add rounded corners? [duplicate]

    CSS - How to control the gap between background image and container