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
MySQL joint table query basic operation left-join common pitfalls
Overview For small and medium-sized projects, joi...
Docker uses the nsenter tool to enter the container
When using Docker containers, it is more convenie...
Summary of MySQL string interception related functions
This article introduces MySQL string interception...
jQuery uses the canvas tag to draw the verification code
The <canvas> element is designed for client...
Analysis of the Docker image construction principle (you can build an image without installing Docker)
Building an image is a very important process in ...
Detailed explanation of creating a view (CREATE VIEW) and usage restrictions in MySQL
This article uses examples to describe the creati...
K3s Getting Started Guide - Detailed Tutorial on Running K3s in Docker
What is k3d? k3d is a small program for running a...
Encoding problems and solutions when mysql associates two tables
When Mysql associates two tables, an error messag...
How to show or hide common icons on the desktop in Windows Server 2012
Windows Server 2012 and Windows Server 2008 diffe...
CSS style control to achieve IE submission form record history click return information is still there
It is mainly a CSS style control and a META tag; C...
Summary of several key points about mysql init_connect
The role of init_connect init_connect is usually ...
Docker+selenium method to realize automatic health reporting
This article takes the health reporting system of...
Tips for optimizing MySQL SQL statements
When faced with a SQL statement that is not optim...
How does Vue implement communication between components?
Table of contents 1. Communication between father...
Detailed explanation of the correct way to open em in CSS
Why do we say “usually 1em=16px”? The default tex...