CSS to achieve several common implementations of horizontal and vertical centering
============================================================================
1 Only applicable to the specified width and height of the centered element:
（1）absolute + 负margin
The percentage of absolute positioning is relative to the width and height of the parent element. Through this feature, the child element can be displayed in the center, but the absolute positioning is based on the upper left corner of the child element. The desired effect is that the center of the child element is displayed in the center. In order to correct this problem , You can use the negative value of the outer margin, and the negative outer margin can make the element position in the opposite direction. By specifying the outer margin of the child element to be a negative value of half the width of the child element, you can center the child element.
Disadvantage: Need to know the width and height of the child element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 通用样式 */
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
}
.box {
background: green;
}
/* 核心 */
.wp {
position: relative;
}
.box {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="wp">
<div class="box">123123</div>
</div>
</body>
（2）absolute + margin auto
By setting the distance in all directions to be 0, and now the margin is set to auto, you can center in all directions
Disadvantage: Need to know the width and height of the child element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 通用样式 */
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
}
.box {
background: green;
}
/* 核心 */
.wp {
position: relative;
}
.box {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="wp">
<div class="box">absolute + margin auto</div>
</div>
</body>
</html>
（3）absolute + calc
css3 brings calculated attributes. Since the top percentage is based on the upper left corner of the element, it is fine to subtract half of the width
Disadvantages: The compatibility of this method depends on the compatibility of calc, and you need to know the width and height of the child elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 通用样式 */
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
}
.box {
background: green;
}
/* 核心 */
.wp {
position: relative;
}
.box {
width: 100px;
height: 100px;
position: absolute;;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
</style>
</head>
<body>
<div class="wp">
<div class="box">absolute + calc</div>
</div>
</body>
</html>
2 No need to specify width and height for centered elements:
（4）absolute + transform
For the absolute positioning problem, you can also use the new transform of css3. The transform attribute can also set a percentage, which is relative to its own width and height, so you can say that the translate is set to -50%, and it can be centered.
Disadvantages: compatibility depends on compatibility with translate2d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 通用样式 */
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
}
.box {
background: green;
}
/* 核心 */
.wp {
position: relative;
}
.box {
position: absolute;;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="wp">
<div class="box">absolute + transform</div>
</div>
</body>
</html>
(5) In-line element lineheight
Setting the box as an inline element can be centered horizontally through text-align, but many students may not know that vertical-align can also be centered vertically.
Disadvantages: This method needs to reset the text display in the child element to the desired effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 通用样式 */
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
}
.box {
background: green;
}
/* 核心 */
.wp {
line-height: 300px;
text-align: center;
font-size: 0px;
}
.box {
font-size: 16px;
display: inline-block;
vertical-align: middle;
line-height: initial;
text-align: left; /* 修正文字 */
}
</style>
</head>
<body>
<div class="wp">
<div class="box">行内元素 lineheight</div>
</div>
</body>
</html>
(6) Parent element table + child element inline-block
The new table attribute of css allows us to turn ordinary elements into the realistic effect of table elements. This feature can also achieve horizontal and vertical centering
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 通用样式 */
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
}
.box {
background: green;
}
/* 核心 */
.wp {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box {
display: inline-block;
}
</style>
</head>
<body>
<div class="wp">
<div class="box">父元素 table + 子元素 inline-block</div>
</div>
</body>
</html>
(7) The parent element flex positioning
As a modern layout scheme, flex subverts past experience. It only needs a few lines of code to be elegantly centered horizontally and vertically.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 通用样式 */
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
}
.box {
background: green;
}
/* 核心 */
.wp {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="wp">
<div class="box">父元素 flex 定位</div>
</div>
</body>
</html>
(8) The grid layout of the parent element
The new grid layout of css, due to its poor compatibility, has not paid much attention to it. The horizontal and vertical centering can also be achieved through the grid.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 通用样式 */
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
}
.box {
background: green;
}
/* 核心 */
.wp {
display: grid;
}
.box {
align-self: center;
justify-self: center;
}
</style>
</head>
<body>
<div class="wp">
<div class="box">父元素 grid 布局</div>
</div>
</body>
</html>
