CSS uses position + margin to achieve the method of horizontal and vertical centering of fixed boxes
|
margin:auto; + position: absolute; up, down, left, and right:0
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Use position + margin to fix the box horizontally and vertically</title>
<style>
body * {
outline: 1px #ff0000 solid;
}
.father {
width: 500px;
height: 300px;
position: relative;
}
.father .son {
width: 180px;
height: 140px;
/* */
position: absolute;
right: 0;
bottom: 0;
top: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son">margin:auto + up, down, left, and right:0</div>
</div>
</body>
</html>//end This is the end of this article about how to use position + margin in CSS to achieve horizontal and vertical centering of a fixed box. For more relevant content on horizontal and vertical centering of a fixed box in CSS, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future! |
<<: Docker deploys Mysql, .Net6, Sqlserver and other containers
>>: Sublime Text - Recommended method for setting browser shortcut keys
Recommend
Vue method to verify whether the username is available
This article example shares the specific code of ...
HTML form tag tutorial (3): input tag
HTML form tag tutorial, this section mainly expla...
Detailed analysis of matching rules when Nginx processes requests
When nginx receives a request, it will first matc...
Analysis of JavaScript's event loop mechanism
Table of contents Preface: 1. Reasons for the eve...
MySQL 8.0.25 installation and configuration tutorial under Linux
The latest tutorial for installing MySQL 8.0.25 o...
XHTML Getting Started Tutorial: Commonly Used XHTML Tags
<br />Just like an article, our web pages sh...
Analysis of the process of deploying nGrinder performance testing platform with Docker
What is nGrinder? nGrinder is a platform for stre...
Essential Handbook for Web Design 216 Web Safe Colors
The color presentation on a web page will be affec...
MySQL 5.6 binary installation process under Linux
1.1 Download the binary installation package wget...
JavaScript to achieve the effect of clicking on the submenu
This article shares the specific code of JavaScri...
Theory: The two years of user experience
<br />It has been no more than two years sin...
Vue.js implements tab switching and color change operation explanation
When implementing this function, the method I bor...
CSS3 achieves conic-gradient effect
grammar: background-image: conic-gradient(from an...
Five ways to achieve automatic page jump in HTML
In the previous article, we introduced three comm...
Java programming to write a JavaScript super practical table plug-in
Table of contents Effects Documentation first ste...