How to center a DIV popup?

This question already has an answer here:

How to vertically center a div for all browsers? 41 answers

---

This is how you can center elements easily:

Suppose you have the following:

<div class="aaa">
    fsdfsd
</div>

Use the following css:

.aaa {
    transform: translate3d(-50%, -50%, 0);
    position: absolute;
    top: 50%;
    left: 50%;
 }

Here is jsfiddle: https://jsfiddle.net/ffnvjz4q/
This is the code you need:

#idOfForm{
    transform: translate3d(-50%, -50%, 0);
    z-index: 10000;
    position: absolute;
    background-color: white;
    top: 50%;
    bottom: 0;
    left: 50%;
    right: 0;
    padding: 10px;
    width: 500px;
    min-height: 250px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 3px 3px 3px #b8b8b8;
    font-family: sans-serif;
    color: #484848;
 }

---

What browsers does your 'app' must support ? The easiest way to achieve this is using CSS flexbox but it is not fully support yet

http://caniuse.com/#search=flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent {
  display: flex;
  height: 300px; /* Or whatever */
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}

---

<div class="modal">
 <div class="modal-body">
  <!-----put your form code here --->
 </div>
</div>


.modal {
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.4);
 z-index: 2;
}

.modal-body {
 position: relative;
 max-width: 500px;
 width: 100%;
 margin: 50px auto 20px;
 background-color: #fff;
 min-height: 50px;
}

链接地址: http://www.djcxy.com/p/41512.html

上一篇: 垂直居中绝对div，没有定义的高度

下一篇: 如何居中DIV弹出窗口？