The css control adds a p with a unified class name, and I want it to be displayed horizontally and vertically in the center. However, the size of the p is different, so the css cannot be fixed. Do other students have any good ideas?
迷茫2017-06-26 10:54:35
flex layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#main
{
width:220px;
height:300px;
border:1px solid black;
display:flex;
justify-content:center;
align-items:center;
}
#main p
{
}
</style>
</head>
<body>
<p id="main">
<p style="background-color:coral;">红色</p>
</p>
</body>
</html>
过去多啦不再A梦2017-06-26 10:54:35
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
扔个三星炸死你2017-06-26 10:54:35
Vertical centering:
table layout method, inline block method
absolute positioning method
viewport centering
flexbox-based solution
过去多啦不再A梦2017-06-26 10:54:35
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
巴扎黑2017-06-26 10:54:35
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;
}
PHP中文网2017-06-26 10:54:35
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.
<p class="mask">
<p class="mask-con">
这是文字信息
</p></p>
.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
滿天的星座2017-06-26 10:54:35
Parent element
{
position: relative;
}Child elements
{
position:absolute;
top:50%;
left:50%;
transform:(-50%,-50%);
}習慣沉默2017-06-26 10:54:35
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;
/* ... */
}