javascript - css controls the div to always be centered horizontally and vertically, and the size of this div is different

Question

The css control adds a div with a unified class name. I want it to be displayed horizontally and vertically in the center. However, the size of the div is different, so the css cannot be fixed. Does anyone else have any good ideas?

迷茫 · Answer

flex layout

过去多啦不再A梦 · Answer

One is to use flex layout to center the child elements horizontally and vertically; the other is to use absolute positioning and transform to move the position.
.flex {
display: flex;
align-items: center;
justify-content: center;
}

.one {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

Portal

扔个三星炸死你 · Answer

Vertical centering:
table layout method, inline block method
absolute positioning method
viewport centering
flexbox-based solution

过去多啦不再A梦 · Answer

A common question, someone abroad has sorted out vertical centering in various situations: https://css-tricks.com/center...

We even generate code directly for you and consider whether it is compatible with IE: http://howtocenterincss.com/

You can also check out the translated version: https://github.com/chenjsh36/...

After reading this, I no longer have to worry about various vertical centering problems 23333

黄舟 · Answer

Add display:flex,align-items:center to the parent element

巴扎黑 · Answer

You can use elastic layout above, but it does not support low-level browsers.
You can use absolute positioning to center the p vertically and horizontally

p{
    position: absolute;  
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;  
    width: 620px;
    height: 618px;
    margin: auto;  
    padding: 30px 0;
    box-sizing: border-box;
}

三叔 · Answer

flex layout is also recommended

PHP中文网 · Answer

Various elastic layers? Various calculations? Centering left and right is easy, just

margin:0 auto;
is fine, but going up and down is a little more troublesome. Although it’s troublesome in many ways

1. Judging by js, this one is relatively cumbersome, so I won’t go into details. Friends who can easily understand js can do it

2, disable:table. This requires the cooperation of two DOMs. It is not recommended. The main compatibility is also average

3. Use transfrom. If you don’t consider compatibility and don’t know the height, it is highly recommended. The approximate method is as follows:

.dom{
Define the width yourself
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
I know the width, but I don’t know how highly I recommend this.

4. If you know the width and height, you don’t need the above, because the above is incompatible. This one is compatible. The code is as follows:

.dom{
Define the width and height by yourself
position: absolute;
margin: auto;
top:0;
right: 0;
bottom:0;
left: 0;
}
5, flex layout, in addition to compatibility, Everything else is fine.


    这是文字信息

.mask{

position: fixed;
top:0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,.5);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;

}
.mask-con{

width: 200px;
/*height: 90px;*/
height: auto;
background: #fff;
font-size: 14px;
padding: 20px;
border-radius:10px;

}
6. If you are considering compatibility ====> please review the first item. [What age is it? Still considering IE789, the main IE7 DOM1 support is not very good, so. . . 】
7, nothing else. The above ones are definitely enough. If there are any good ones, please add them

滿天的星座 · Answer

Parent element

{
 position: relative;
}

Child elements

{
position:absolute;
top:50%;
left:50%;
transform:(-50%,-50%);
}

習慣沉默 · Answer

Added three more methods.

Center an element with known width and height using absolute or fixed positioning:

.horizontal-and-vertical-center {
    width: 200px;
    height: 200px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Uses display: table to lay out the centered element, supports uncertain width and height, and is compatible with IE8+ and other modern browsers:

.table {
    display: table;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
 
.cell {
    display: table-cell;
    vertical-align: center;
}
 
.horizontal-and-vertical-center {
    width: 800px;
    margin: 0 auto;
    /* 如果不定宽度的话用 inline-block 并且外层 text-align: center */
}

:before Pseudo-element expands line height (method used by AmazeUI in modal components, and supports uncertain width and height, IE8+):

.am-modal {
    /* ... */
    text-align: center;
    /* ... */
}

.am-modal:before {
    content: "0B";
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.am-modal-dialog {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
    /* ... */
}