How to center horizontally and vertically absolutely positioned elements-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to center horizontally and vertically absolutely positioned elements

高洛峰

Feb 24, 2017 pm 01:35 PM

vertical center level

This article mainly introduces the method of horizontal and vertical centering of absolutely positioned elements. There are 3 methods for reference. Friends who need it can take a look.

1.css to achieve centering

Disadvantages: 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>

Copy after login

2. CSS3 achieves horizontal and vertical centering

Note: Regardless of the size of the element Whatever it is, 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>

Copy after login

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>

Copy after login

More For related articles on horizontal and vertical centering methods of absolutely positioned elements, please pay attention to the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

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

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

4 weeks ago By DDD

Atomfall guide: item locations, quest guides, and tips

4 weeks ago By DDD

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

Where is the login entrance for gmail email?

7673

CakePHP Tutorial

1393

C# Tutorial

1207

What is the format of the account name of steam

win11 activation key permanent

Related knowledge

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 set WPS table centering Mar 19, 2024 pm 09:34 PM

As the functions of WPS become more and more powerful, we encounter more and more problems about the use of functions. In WPS, we often use WPS tables. If we need to print the WPS table, in order to make the table look beautiful, we need to center the table at this time. So, the question is, how do we center the WPS table? Today I am sharing a tutorial here, I hope it can help you! Step details: 1. I will explain it through practical operations. The following is a simple table I made using a WPS table. 2. Through print preview, we can find that the WPS table is on the left by default. What if we want to center the table? 3. At this time, we need to click [Page Layout] in the [Toolbar]

Evaluate the performance and level of Kirin 9000s Mar 18, 2024 pm 03:21 PM

As a new star in the mobile phone market this year, Kirin 9000s has attracted much attention. As competition in the smartphone market becomes increasingly fierce, as Huawei's flagship processor, the Kirin series has always attracted much attention. As the latest processor, how does the Kirin 9000s perform? What is its performance and level? The following will evaluate the Kirin 9000s and analyze its advantages and disadvantages from various aspects. First of all, from the perspective of performance, Kirin 9000s is manufactured using an advanced 5nm process and integrates ARM’s latest Co

How to center a div inside another div? Sep 08, 2023 am 11:13 AM

Introduction Center alignment of divs is one of the most important aspects of front-end development. In this article, we will look at the technique of placing one div inside another div using HTML and CSS. In this tutorial we will have a parent div which should have child divs. Our task is to place the child div in the center of the parent div. Using Transform translation and position syntax this is not a very popular way to center align one div into another div syntax left:50%;top:50%;Transform:translate(-50%,-50%);above The syntax does the following - The CSS rule "left:50%;" sets the horizontal position of the element to

How-to: How to resize and center Win11 taskbar icons Jan 03, 2024 am 08:17 AM

Win11 brings a brand new interface, including changes to the taskbar. However, many users feel that the taskbar icons are too big and are not used to them when using them. For this reason, the following will bring you the win11 centered taskbar icon change. Come and learn the little operation methods together. How to make the center taskbar icon smaller in win11: 1. First, you need to open the registry editor. 2. Then expand: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced\. 3. Then create a new DWORD value of "TaskbarSi" on the right, and add

Create horizontal scrollable sections in CSS Aug 29, 2023 am 09:29 AM

Horizontally scrollable sections are a common web design pattern used to display content that exceeds the width of the viewport. This design pattern allows users to scroll horizontally, providing a unique and engaging way to display large images, galleries, timelines, maps, and other content. This is achieved by using CSS properties such as overflow−x:auto or overflow−x:scroll. This uses native browser functionality for horizontal scrolling and is responsive across devices. Allows easy navigation and exploration of content. It does not require any additional libraries or plugins. The algorithm uses the "container" class to define container elements. Set the container's "overflow−x" property to "auto" to enable horizontal scrolling. container

CSS Tips: How to Implement a Center-Aligned Layout Oct 20, 2023 pm 04:36 PM

CSS Tips: How to Implement Center-Aligned Layout In web design, center-aligned layout is often used. Whether it is center-aligning text, images, or the entire page layout, it can all be achieved through CSS. This article will introduce several CSS techniques to achieve center-aligned layout and provide specific code examples. First, let’s look at how to implement a horizontally centered layout. Here are code examples for some common elements: Text-center alignment: .text-center{text-align:ce

Front-end skill sharing: Use CSS3 fit-content to center elements horizontally Sep 09, 2023 pm 01:36 PM

Front-end skill sharing: Use CSS3fit-content to center elements horizontally In front-end development, we often encounter situations where we need to center an element horizontally. This effect can be easily achieved using the fit-content property of CSS3. This article will introduce how to use the fit-content attribute and provide code examples. The fit-content attribute is a length value relative to the element's parent container, which can automatically calculate the width of the element based on the actual size of the content. By converting the element

See all articles