This time I will bring you the vertically centered container of html+css. What are the precautions when using the vertically centered container of html+css? Here is a practical case, let’s take a look.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{ margin: 0; padding: 0;
} .parent{ width: 400px; height: 400px; border:1px solid gray; position: relative;
} .child{ width: 100px; height: 100px; top:0; left:0; right:0; bottom:0; margin:auto; background: pink; position: absolute;
} </style></head><body>
<div class="parent">
<div class="child"></div>
</div></body></html>I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
Use CSS to implement text truncation in HTML
JS to implement Bayesian classifier
How to use H5’s Canvas to draw a music circular spectrogram
The above is the detailed content of Vertical centering container of html+css. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
