The label is horizontally and vertically centered, which is very common in interviews and daily projects. Four common methods are as follows:
Scheme 1: the width and height of the label are known, the label is absolutely positioned, the values of four directions are all 0, and margin: auto is set; note: IE7 and earlier versions do not support it;
Scheme 2: given the width and height of the label, use a negative margin value, which is negative half of the label width;
Scheme 3: label absolute positioning, left and top value set to 50%, and transform offset - 50%, - 50%
Scheme 4: the parent is transformed into an elastic box, and the cross axis of the main shaft is aligned in the middle;
The specific code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Label horizontal vertical center</title>
<style type="text/css">
.container {
width: 880px;
}
.wrapper {
margin: 10px;
float: left;
width: 200px;
height: 200px;
background: blue;
border-radius: 10px;
}
.center {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background: red;
border-radius: 5px;
}
/*Scheme 1: the width and height of the label are known, the label is absolutely positioned, the values of four directions are all 0, and margin: auto is set; note: IE7 and earlier versions do not support*/
.wrapper1 {
position: relative;
}
.center1 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/*Scheme 2: given the width and height of the label, use a negative margin value, which is negative half of the label width*/
.wrapper2 {
position: relative;
}
.center2 {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
/*Scheme 3: label absolute positioning, left and top value set to 50%, and transform offset - 50%, - 50%*/
.wrapper3 {
position: relative;
}
.center3 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/*Scheme 4: the parent is transformed into an elastic box, and the cross axis of the main shaft is aligned in the middle*/
.wrapper4 {
/*Parent to elastic box*/
display: flex;
/*Center alignment of items on the spindle*/
justify-content: center;
/*Items are centered on the cross axis.*/
align-items: center;
}
.center4 {}
.des {
text-indent: 2rem;
font-size: 18px;
word-spacing: 2px;
box-sizing: border-box;
padding: 20px 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper wrapper1">
<div class="center center1">
Scheme 1
</div>
</div>
<div class="wrapper wrapper2">
<div class="center center2">
Option two
</div>
</div>
<div class="wrapper wrapper3">
<div class="center center3">
Option three
</div>
</div>
<div class="wrapper wrapper4">
<div class="center center4">
Option four
</div>
</div>
<div class="wrapper des">
Scheme 1: the width and height of the label are known, the label is absolutely positioned, and the values of four directions are all 0, and the margin: auto;Be careful: IE7 And previous versions do not support
</div>
<div class="wrapper des">
Option two:Width and height of known label, use negative margin Value, which is negative half of the label width
</div>
<div class="wrapper des">
Scheme 3: label absolute positioning, left And top Value set to 50%，And do transform deviation-50%，-50%
</div>
<div class="wrapper des">
Scheme 4: the parent is transformed into an elastic box, and the cross axis of the main shaft is aligned in the middle
</div>
</div>
</body>
</html>The renderings are as follows:
Align labels horizontally and center