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

Introduction to MySQL method of deleting table data with foreign key constraints

DIV and image horizontal and vertical centering compatible with multiple browsers

Introduction to MySQL method of deleting table data with foreign key constraints

Implementation of adding remark information to mysql

Common front-end JavaScript method encapsulation

TypeScript decorator definition

Docker image access to local elasticsearch port operation

Vue computed properties

How to install jupyter in docker on centos and open ports

CSS implementation code for drawing triangles (border method)

Implementation of clicking through the transparent area of irregular forms in Electron

Implementation of CSS loading effect Pac-Man

Recommend

IE8 compatibility notes I encountered

Nginx high concurrency optimization practice

Let you understand the working principle of JavaScript

Detailed explanation of the problems and solutions caused by floating elements

What are the advantages of MySQL MGR?

Detailed explanation of Angular component projection

How to reset the root password of Mysql in Windows if you forget it

vue-cli introduction and installation

Implementation of vue3.0+vant3.0 rapid project construction

Detailed explanation of the code for querying data of a certain day, month, or year in MySQL

How to quickly modify the root password under CentOS8

MySQL quick recovery solution based on time point

A brief discussion on the correct approach to MySQL table space recovery

Docker image import, export, backup and migration operations

Mysql5.7.14 installation and configuration method operation graphic tutorial (password problem solution)