Preface
In daily development, we often encounter horizontal and vertical centering of content. Whether it is text or pictures, we put them into a divbox for operation.
draw a box
<!DOCTYPE html>
<html lang="en">
<body>
<div class="child"></div>
</body>
<style>
html {
padding: 0;
margin: 0;
width: 100%;
height: 100vh;
background-color: #457b9d;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
.child {
background-color: #1d3557;
width: 200px;
height: 200px;
}
</style>
</html>
Initial box display
Use flex to center the box
Add the following code in the parent container
display: flex;
/* 水平居中 */
align-items: center;
/* 垂直居中 */
justify-content: center;
details as follows
html {
padding: 0;
margin: 0;
width: 100%;
height: 100vh;
background-color: #457b9d;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
renderings
