DIV and image horizontal and vertical centering compatible with multiple browsers

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:

<div style="position:absolute; top:50%; height:240px;border:1px solid red; margin:0 auto; margin-top:-120px; width:300px; left:50%; margin-left:-150px;"></div>

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

Recommend

Four modes of Oracle opening and closing

>1 Start the database In the cmd command windo...

Methods and steps to access Baidu Maps API with JavaScript

Table of contents 1. Baidu Map API Access 2. Usin...

Advantages and disadvantages of common MySQL storage engines

Table of contents View all storage engines InnoDB...

Optimizing query speed of MySQL with tens of millions of data using indexes

1. The role of index Generally speaking, an index...

Unbind SSH key pairs from one or more Linux instances

DetachKeyPair Unbind SSH key pairs from one or mo...

Examples of correct judgment methods for data types in JS

Table of contents Preface Can typeof correctly de...

HTML table markup tutorial (9): cell spacing attribute CELLSPACING

A certain distance can be set between cells in a ...

A detailed discussion of evaluation strategies in JavaScript

Table of contents A chestnut to cover it Paramete...

Implement dynamic management and monitoring of docker containers based on spring-boot and docker-java [with complete source code download]

Introduction to Docker Docker is an open source a...

Practical record of optimizing MySQL tables with tens of millions of data

Preface Let me explain here first. Many people on...

How to install openjdk in docker and run the jar package

Download image docker pull openjdk Creating a Dat...

Vue implements the question answering function

1. Request answer interface 2. Determine whether ...

MySQL 5.7.15 version installation and configuration method graphic tutorial

This article shares with you a detailed tutorial ...

React native ScrollView pull down refresh effect

This article shares the specific code of the pull...

XHTML tutorial, a brief introduction to the basics of XHTML

<br />This article will briefly introduce yo...