Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
If you want a method that can be used around the elements of its float, flex, position
Block elements centered about margin 0 auto;
Inline elements parent element of text-align center
The vertical and horizontal center of it?
1.position
html part
<div class="center">test</div>
Elements known width and height, css portion
.center {
background: red;
width: 100px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/* or */
.center {
background: red;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
Unknown element width and height, css portion
.center {
color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
2.flex layout
html part
<div class="wrap">
<div class="item">test</div>
</div>
css section
.wrap {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.item {
color: red;
}
3. The pseudo-class
html part
<div class="wrap">
<div class="item">test</div>
</div>
css section
.wrap {
width: 100%;
height: 100%;
background-color: #009ef4;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
.wrap:after {
display: inline-block;
content: '';
width: 0;
height: 100%;
vertical-align: middle;
}
.item {
color: red;
display: inline-block;
vertical-align: middle;
}
4. Use the table
html part
<div class="wrap">
<div class="item">
test
</div>
</div>
css section
.wrap {
width: 100%;
height: 100vh;
display: table;
}
.item {
color: #F00;
display: table-cell;
vertical-align: middle;
text-align: center;
}