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
Sharing experience on the priority of CSS style loading
During the project development yesterday, I encoun...
Why MySQL can ignore time zone issues when using timestamp?
I have always wondered why the MySQL database tim...
How to use Nginx to carry rtmp live server
This time we set up an rtmp live broadcast server...
How to deploy SSL certificate in windows apache environment to make the website support https
I won’t talk about the use of SSL certificates. F...
A brief introduction to Linux performance monitoring commands free
When the system encounters various IO bottlenecks...
Python virtual environment installation and uninstallation methods and problems encountered
Ubuntu16.04 install and uninstall pip Experimenta...
Example of how to implement underline effects using Css and JS
This article mainly describes two kinds of underl...
Example code for CSS columns to achieve two-end alignment layout
1. Going around in circles After going around in ...
Detailed explanation of common commands in MySQL 8.0+
Enable remote access Enable remote access rights ...
Share some key interview questions about MySQL index
Preface An index is a data structure that sorts o...
How to write the style of CSS3 Tianzi grid list
In many projects, it is necessary to implement th...
About front-end JavaScript ES6 details
Table of contents 1. Introduction 1.1 Babel Trans...
Implementation of the Pycharm installation tutorial on Ubuntu 18.04
Method 1: Download Pycharm and install Download a...
Analysis and solution of the reason why overflow-y: visible; does not work in CSS
Scenario A recent requirement is an h5 page for m...