How to realize the horizontal and vertical centering of a block level element
1. Use display: table cell; Property
display:table-cell; Combine vertical align: middle; Use to achieve vertical centering, margin: 0 atuo; Horizontal centering of child elements can be realized.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
< title > table cell centered < / Title >
<style type="text/css">
.content{
border: 1px solid blue;
display: table;
margin: 50px auto;
}
.table{
height: 300px;
width: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid red;
}
.box{
height: 150px;
width: 150px;
background: #109D71;
margin: 0 auto;
display: table;
}
.word{
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
Vertically and horizontally centered
</div>
</div>
</div>
</div>
</body>
</html>
2. Flex flexible layout
View detailshttps://www.runoob.com/w3cnote/flex-grammar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
< title > flex layout < / Title >
<style>
.content {
width: 300px;
height: 300px;
margin: 50px;
border: 1px solid #109D71;
display: flex;
align-items: center;
justify-content: center;
}
.box{
width: 150px;
height: 150px;
background-color: #109D71;
text-align: center;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div>
<div>
Horizontal vertical center
</div>
</div>
</body>
</html>
3. Use absolute positioning to separate elements from ordinary document flow, and then combine margin: Auto.
<!DOCTYPE html>
<head>
< title > absolute center < / Title >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.content {
width: 300px;
height: 300px;
border: 1px solid #109D71;
position:relative;
}
.box {
margin:auto;
width: 100px;
height: 100px;
background: #109D71;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
</style>
</head>
<body>
<div>
<div>
</div>
</div>
</body>
</html>4. Absolute + margin is centered by calculating the width and height of elements
When centering the child element, margin must know the width and height of the child element. Do not use percentage.
<!DOCTYPE html>
<head>
< title > absolute + margin calculation element width and height judgment center < / Title >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.content {
width: 300px;
height: 300px;
border: 1px solid #109D71;
position: relative;
}
.box {
position: absolute;
width: 100px;
height: 100px;
/* top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px; */
top: calc(50% - 50px);
left: calc(50% - 50px);
background: #109D71;
}
</style>
</head>
<body>
<div>
<div>
</div>
</div>
</body>
</html>5. Absolute + translate: move the element 50% and 50% of itself through translate to achieve horizontal and vertical centering.
Translate (- 50%, – 50%) attribute: up (x-axis) and left (Y-axis), move 50% of its length and width to make it in the center.
top: 50%; left: 50%;： It takes the upper left corner of the window as the origin and needs to reduce half of its width and height to be centered.
Unlike using margin to achieve centering,Margin must know its own width and height, while translate can be centered without knowing its width and height. The percentage in the tranlate function is the percentage relative to its own width and height。
<!DOCTYPE html>
<head>
<title>absolute+translate</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.content {
width: 300px;
height: 300px;
border: 1px solid #109D71;
position: relative;
}
.box {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
/*Progressive enhancement*/
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: #109D71;
}
</style>
</head>
<body>
<div>
<div>
</div>
</div>
</body>
</html>I recommend using methods 2 and 3,
Flex layout method is suitable for local use.
Absolute positioning is suitable for full screen scenes, such as pop-up frames.
A person has at least one dream and has a reason to be strong. If the heart has no habitat, it is wandering everywhere.
