It can be used in daily life, and it can also be used in interviews
0. Initialize two boxes
<style>
.parent {
width: 500px;
height: 500px;
background-color: skyblue;
}
.child {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class='parent'>
<div class='child'></div>
</div>
</body>
Copy the code
Method 1 locates the parent phase of the child
Child parent phase
.parent {
position: relative;
}
.child {
position: absolute;
}
Copy the codeMethod 1.1 Margin pure calculation (not recommended)
Half of the width of the parent box minus half of the width of the child box 500/2 minus 200/2 is 150 half of the height of the parent box minus half of the height of the child box 500/2 minus 200/2 is 150
.child {
margin-top:150px;
margin-left:150px;
}
Copy the code
Methods 1.2 margin
.child {
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin: auto;
}
Copy the code
1.3 the transform method
.child {
position: absolute;
top: 50%;
left: 50%
}
Copy the code
.child {
transform: translate(-50%, -50%);
}
Copy the code
[CSS] Positioning – static positioning – Relative positioning – Absolute positioning – child – parent – fixed positioning – sticky positioning
Method 2 Flex (recommended)
Set the parent box as an elastic box container so that the child elements are horizontally centered and vertically centered
.parent {
display: flex;
justify-content: center;
align-items: center;
}
Copy the code
Methods 3 table – cell
.parent {
display: table-cell;
vertical-align: middle;
}
Copy the code
.child {
margin: 0 auto;
}
Copy the code
Methods 4 inline – block
Subboxes are set up as inline blocks
.child {
display: inline-block;
}
Copy the codeAdd to the parent box
.parent {
text-align: center;
line-height: 500px;
}
Copy the code
.child {
vertical-align: middle;
}
Copy the code
Methods 5 JavaScript
Give the box an ID
<style>
.parent {
width: 500px;
height: 500px;
background-color: skyblue;
}
.child {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class='parent' id='parent'>
<div class='child' id='child'></div>
</div>
</body>
Copy the codeWrite js
<body>
<div class='parent' id='parent'>
<div class='child' id='child'></div>
</div>
<script>
let parent = document.getElementById('parent');
let child = document.getElementById('child');
let parentW = parent.offsetWidth;
let parentH = parent.offsetHeight;
let childW = child.offsetWidth;
let childH = child.offsetHeight;
parent.style.position = "relative"
child.style.position = "absolute";
child.style.left = (parentW - childW) / 2 + 'px';
child.style.top = (parentH - childH) / 2 + 'px';
</script>
</body>
Copy the code