DIV and image horizontal and vertical centering compatible with multiple browsers

The first type: full CSS control, layer floating (suitable for login pages)

Copy code

The code is as follows:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
#divcenter{
position:absolute;/*Floating layer*/
top:50%;
left:50%;
width:300px;
height:300px;
margin-top:-150px;/*Note that this must be half of the DIV height*/
margin-left:-150px;/*This is half of the DIV width*/
background:yellow;
border:1px solid red; }
</style>
</head>
<body>
<div id="divcenter"> this is a test </div>
</body>
</html>

The second type: JS + CSS control, no floating (suitable for login pages)

Copy code

The code is as follows:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
function cen(){
var divname = document.all("testdiv");
//The center height is equal to the page content height minus the DIV height divided by 2
var topvalue = (document.body.clientHeight - divname.clientHeight)/2;
divname.style.marginTop = topvalue;
}
// Triggered when the page size changes
window.onresize = cen;
</script>
</head>
<body style="height:100%; width:100%; text-align:center;" onload=cen()>
<div id = "testdiv" name = "testdiv" style = "margin:0 auto; border:1px solid red; height:400px; width:400px;">
DIV Centering Demonstration
</div>
</body>
</html>

The third type: the simplest and most applicable one is centered in the top, bottom, left, and right, and is compatible with all browsers

Copy code

The code is as follows:

Other methods:
Pure CSS perfectly solves the problem of vertical and horizontal centering of images in div, compatible with IE7.0, IE6.0, IE5.5, IE5.0, FF, Opera, Safari
The following is the program code

Copy code

The code is as follows:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
.img_v {
display:table-cell !important;
display:block;
position:static !important;
position:relative;
overflow:hidden;
width:400px;
height:400px;
border:1px solid #000;
vertical-align:middle;
text-align:center;
}
.img_v p {
display:table-cell !important;
display:block;
margin:0;
position:static !important;
position:absolute;
top:50%;
left:50%;
width:400px;
margin-left:auto;
margin-right:auto;
}
.img_v img {
position:static !important;
position:relative;
top:auto !important;
top:-50%;
left:auto !important;
left:-50%;
}
</style>
</head>
<body>
<div class="img_v">
<p><img src="upload/2022/web/logo.gif"></p>
</div>
</body>
</html>

<<: Detailed explanation of Vue3's responsive principle

>>: mysql data insert, update and delete details

How to purchase and initially build a server

DIV and image horizontal and vertical centering compatible with multiple browsers

How to purchase and initially build a server

Vue3.0 uses the vue-grid-layout plug-in to implement drag layout

Pure CSS to achieve cool charging animation

The linkage method between menu and tab of vue+iview

CUDA8.0 and CUDA9.0 coexist under Ubuntu16.04

mysql5.6.8 source code installation process

Html to achieve dynamic display of color blocks report effect (example code)

The difference between div and span in HTML (commonalities and differences)

Vue implements dynamic circular percentage progress bar

Summary of SQL deduplication methods

Recommend

Detailed explanation of virtual DOM in Vue source code analysis

Example code for implementing the "plus sign" effect with CSS

Textarea text area width and height width and height automatic adaptation implementation code

Detailed steps to install MySQL on CentOS 7

Web page printing thin line table + page printing ultimate strategy

Design Theory: Textual Expression and Usability

select the best presets to create full compatibility with all browsersselect

CSS easily implements fixed-ratio block-level containers

HTML symbol to entity algorithm challenge

Implementing parameter jump function in Vue project

How to insert a link in html

Pure CSS to solve the ceiling and bottom suction in H5 layout implementation steps

Tutorial on installing phpMyAdmin under Linux centos7

Complete steps to solve 403 forbidden in Nginx

Take you to understand the event scheduler EVENT in MySQL