How to implement CSS pop-up window centering
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; }
Define peripheral box pseudo-class:
outbox:before{ content=""; width:0; height:100%; display:inline-block; vertical-align:middle; }
Definition content box:
contentbox{ display:inline-block; vertical-align:middle; text-align:center; }
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>
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!

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

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

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.

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].

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]

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.

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

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.
