Web Front-end
CSS Tutorial
Three methods of horizontally and vertically centering absolutely positioned elements
Three methods of horizontally and vertically centering absolutely positioned elements
This time I will bring you three methods of absolute positioning horizontal and vertical centering of elements. What are the precautions to achieve horizontal and vertical centering of absolutely positioned elements? The following is a practical case. , let’s take a look.
1.css to achieve centering
Disadvantages: You need to know the width and height of the element in advance.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 50%; top: 50%;
border:1px solid #000;
background:red;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>2. CSS3 achieves horizontal and vertical centering
Note: No matter what the size of the element, it can be centered. However, this writing method is only compatible with IE8 and above, and can be ignored on mobile terminals.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
border:1px solid #000;
background:red;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>3. Margin: auto to achieve centering
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border:1px solid #000;
background:red;
margin: auto; /* 有了这个就自动居中了 */
}
</style>
</head>
<body>
<p class="box">
</p>
</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 php Chinese websites related articles!
Recommended reading:
Detailed explanation of dynamic loading of css
Detailed explanation of the process of implementing fan-shaped animation menu in CSS3
How to use the webkit-tap-highlight-color property of CSS3
The above is the detailed content of Three methods of horizontally and vertically centering absolutely positioned elements. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to use map and location functions in uniapp
Oct 16, 2023 am 08:01 AM
How to use map and positioning functions in uniapp 1. Background introduction With the popularity of mobile applications and the rapid development of positioning technology, map and positioning functions have become an indispensable part of modern mobile applications. uniapp is a cross-platform application development framework developed based on Vue.js, which can facilitate developers to share code on multiple platforms. This article will introduce how to use maps and positioning functions in uniapp and provide specific code examples. 2. Use the uniapp-amap component to implement the map function
How to locate Apple wireless earphones if they are lost_How to locate Apple wireless earphones
Mar 23, 2024 am 08:21 AM
1. First, we open the [Search] App on the mobile phone and select the device in the list on the device interface. 2. Then, you can check the location and click on the route to navigate there.
How is the performance of the 3060 graphics card?
Jan 27, 2024 am 10:36 AM
Many gamers are very curious about the graphics card 3060 and want to buy a 3060 display, but they don’t know what level the RTX3060 is at. In fact, this graphics card is also at a relatively mainstream level. What is the level of 3060 graphics card: Answer: Mainstream level. This RTX3060 graphics card is very popular among players and is also on sale. It has the unique advantages of the RTX30 series and is very cost-effective. Players with higher requirements for game graphics can choose this graphics card. 3060 graphics card expansion introduction: Frame rate: It is loved by the majority of players. It has a large video memory of 12GB and is very popular. With 12GB of large video memory, it can run AAA masterpieces smoothly without any lag, and the frame rate can even reach 60. Value for money: it
How to locate the other party's mobile phone location on Amap - How to locate the other party's mobile phone location on Amap
Apr 01, 2024 pm 02:11 PM
1. Click to enter the Amap map software on your mobile phone. 2. Click My in the lower right corner. 3. Click to enter the family map. 4. Click Create My Family Map. 5. After the creation is successful, an invitation code will appear and can be shared with another mobile phone.
How to change the location information and how to modify the address
Mar 12, 2024 pm 09:52 PM
We all know very clearly that Taku APP is a very reliable chat and social platform. Now it allows everyone to make friends online. Some of the forms of making friends here mainly allow people to make friends by location. Oh, it's so simple and direct. After all, it can automatically locate your current location information for you, and better match you with some friends in the same city who are close to each other, so that everyone can chat more easily and feel special. Happy, many times, in order to get to know more friends in other places, everyone has the idea of modifying their address, but they don’t know how to modify their location information, which is very difficult. troubled, so the editor of this site also collected some specific
CSS transition effect: how to achieve the sliding effect of elements
Nov 21, 2023 pm 01:16 PM
CSS transition effect: How to achieve the sliding effect of elements Introduction: In web design, the dynamic effect of elements can improve the user experience, among which the sliding effect is a common and popular transition effect. Through the transition property of CSS, we can easily achieve the sliding animation effect of elements. This article will introduce how to use CSS transition properties to achieve the sliding effect of elements, and provide specific code examples to help readers better understand and apply. 1. Introduction to CSS transition attribute transition CSS transition attribute tra
How to quickly find the location of a Huawei phone after it is lost?
Mar 24, 2024 am 08:48 AM
In today's society, mobile phones have become an indispensable part of our lives. As a well-known smartphone brand, Huawei mobile phones are deeply loved by users. However, with the popularity of mobile phones and the increase in frequency of use, mobile phones are often lost. Once our phone is lost, we tend to feel anxious and confused. So, if you unfortunately lose your Huawei phone, how can you quickly find its location? Step 1: Use the mobile phone positioning function. Huawei mobile phones have built-in powerful positioning functions. Users can use the "Security" option in the mobile phone settings.
CSS transformation: how to achieve the rotation effect of elements
Nov 21, 2023 pm 06:36 PM
CSS transformation: How to achieve the rotation effect of elements requires specific code examples. In web design, animation effects are one of the important ways to improve user experience and attract user attention, and rotation animation is one of the more classic ones. In CSS, you can use the "transform" attribute to achieve various deformation effects of elements, including rotation. This article will introduce in detail how to use CSS "transform" to achieve the rotation effect of elements, and provide specific code examples. 1. How to use CSS’s “transf
