Home Web Front-end CSS Tutorial How to implement CSS pop-up window centering

How to implement CSS pop-up window centering

Jun 25, 2018 pm 05:03 PM
center Pop-ups

The following is a simple implementation method for centering pop-up windows. The content is quite good, so I will share it with you now and give it as a reference.

When I was making pages recently, I often encountered the problem of pop-up boxes being centered.

I asked some experts around me and finally figured it out,

Principle of implementation:

1, define a pseudo class for the peripheral box: before

2, define the fixed attribute of the peripheral box

3, Define the content box.

Define peripheral box:

outbox{   
   position:fixed;   
   top:0;   
   rightright:0;   
   bottombottom:0;   
   left:0;   
   display:block;   
   text-align:center;   
}
Copy after login

Define peripheral box pseudo-class:

outbox:before{   
   content="";   
   width:0;   
   height:100%;   
   display:inline-block;   
   vertical-align:middle;   
}
Copy after login

Definition content box:

contentbox{   
    display:inline-block;   
    vertical-align:middle;   
    text-align:center;   
 }
Copy after login

All codes:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>弹窗居中</title>
        <style type="text/css">
            .outbox:before{   
                content:"";   
                width:0;   
                height:100%;   
                display:inline-block;   
                vertical-align:middle;   
            }   
            .outbox{   
                position:fixed;   
                top:0;   
                right:0;   
                bottom:0;   
                left:0;   
                text-align:center;   
            }   
            .content{   
                width:200px;   
                height:200px;   
                background-color:#ccc;   
                display:inline-block;   
                vertical-align:middle;   
            }   
        </style>
    </head>
    <body>
    <p class="outbox">
        <p class="content">
        </p>
    </p>
    <body>
</html>
Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use CSS3 to match horizontal and vertical screens

The table-layout attribute of CSS usage

The above is the detailed content of How to implement CSS pop-up window centering. For more information, please follow other related articles on 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

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1657
14
PHP Tutorial
1257
29
C# Tutorial
1230
24
How to use Vue to implement pop-up window effects How to use Vue to implement pop-up window effects Sep 22, 2023 am 09:40 AM

How to use Vue to implement pop-up window effects requires specific code examples. In recent years, with the development of web applications, pop-up window effects have become one of the commonly used interaction methods among developers. As a popular JavaScript framework, Vue provides rich functions and ease of use, and is very suitable for implementing pop-up window effects. This article will introduce how to use Vue to implement pop-up window effects and provide specific code examples. First, we need to create a new Vue project using Vue's CLI tool. open end

What should I do if there are no pop-up reminders for calendar events in Win10? How to recover if calendar event reminders are gone in Win10 What should I do if there are no pop-up reminders for calendar events in Win10? How to recover if calendar event reminders are gone in Win10 Jun 09, 2024 pm 02:52 PM

The calendar can help users record your schedule and even set reminders. However, many users are asking what to do if calendar event reminders do not pop up in Windows 10? Users can first check the Windows update status or clear the Windows App Store cache to perform the operation. Let this site carefully introduce to users the analysis of the problem of Win10 calendar event reminder not popping up. To add calendar events, click the "Calendar" program in the system menu. Click the left mouse button on a date in the calendar. Enter the event name and reminder time in the editing window, and click the "Save" button to add the event. Solving the problem of win10 calendar event reminder not popping up

How to solve the problem of Win11 pop-up windows that cannot be closed How to solve the problem of Win11 pop-up windows that cannot be closed Dec 22, 2023 pm 05:13 PM

I believe that when using the computer, we are all troubled by pop-up windows that pop up unintentionally. Especially after updating the system, we even encountered the problem that the win11 pop-up window cannot be closed. At this time, we can only close it in the task manager. Solution to the problem that the win11 pop-up window cannot be closed: 1. First press the "Win+R" key combination on the keyboard to open Run. 2. Then enter “msconfig” and press Enter to run. 3. Then enter "Startup" and click "Open Task Manager" 4. Then select the application that pops up under the startup options. 5. Finally, click "Disable" in the lower right corner.

How to open the 360 ​​browser pop-up window How to open the 360 ​​browser pop-up window Mar 28, 2024 pm 09:31 PM

Pop-up windows can be opened and used by themselves in 360 Browser. Some users do not know how to open pop-up windows in 360 Browser. Just uncheck the box in the advanced settings to not allow any website to display pop-up windows. This pop-up window Opening the introduction of the setting method will tell you the specific operation method. The following is a detailed introduction, so take a look. How to open the 360 ​​Browser pop-up window? Answer: Uncheck the box in the advanced settings to not allow any website to display pop-up windows. Detailed introduction: 1. Open the 360 ​​Browser and click the [Settings] icon on the upper right. 2. Select [Option]. 3. Click [Advanced Settings] in the list on the left. 4. Uncheck [Do not allow any website to display pop-up windows].

How to set WPS table centering 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]

Why do win11 users keep receiving account control pop-ups? Why do win11 users keep receiving account control pop-ups? Jan 08, 2024 am 11:30 AM

Sometimes when we open software or programs, we will find that the win11 user account control keeps popping up, but we don’t know why. In fact, this is a way of system protection to prevent us from being invaded by bad software. Why does win11 user account control keep popping up: A: Because win11 user account control is turned on. After it is turned on, the system will keep popping up to remind you in order to protect the computer security and prevent it from being invaded by bad software. Win11 User Account Control Keeps Playing Solution 1. If we find it troublesome to keep playing, we want to close it. 2. Then you can click on the "Start Menu" at the bottom. 3. Then search and open "Change User Account Control Settings". 4. Finally, move the left slider to "Never notify" and "OK" to save.

What should I do if pop-up windows always appear in Win11? How to solve the problem of pop-up windows when opening a software in Win11 What should I do if pop-up windows always appear in Win11? How to solve the problem of pop-up windows when opening a software in Win11 Mar 01, 2024 am 08:43 AM

When using Win11 system, sometimes a pop-up window will appear when opening a certain software, which will affect the user experience. This article will introduce how to solve the problem of pop-up windows when opening a software in Win11, and help users solve this problem. Method 1: 1. Press the [Win+S] key combination, or click the [Search icon] next to the start icon on the taskbar. In the opened Windows search, enter [Control Panel] in the search box, and then click to open the system given Best match [Control Panel Application]; 2. For all control panel item windows, switch to the [Large Icons] view mode, then find and click [Security and Maintenance] under Adjust Computer Settings; 3. Security and Maintenance window, left Side click [Change User Account Control Settings]; 4. User

There is no pop-up window when changing the battery but the battery health is not displayed. There is no pop-up window when changing the battery but the battery health is not displayed. Mar 25, 2024 pm 02:36 PM

1. Open the phone settings, find the battery option, open battery health, and see that only 81% is left. 2. Before replacing, you need to connect to the Apple server, enter Privacy and Security, find Analysis and Improvement, and click Start Diagnosis. 3. Replace directly. For third-party brand batteries, genuine products will display a pop-up window, and the health of non-original genuine batteries cannot be displayed.

See all articles