方法一
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
width:500px;
height:500px;
border:1px solid #666;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
}
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
方法二
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div里面图片垂直居中的几个例子</title>
<style type="text/css">
<!--
body {
margin:0;padding:0
}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #666;
overflow:hidden;
position:relative;
text-align:center;
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle
}
p:after {
content:".";font-size:1px;
visibility:hidden
}
-->
</style>
</head>
<body>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
</body>
</html>
方法三
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div里面图片垂直居中的几个例子</title>
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #666;
overflow:hidden;
position:relative;
text-align:center;
}
div p {
position:static;
+position:absolute;
top:50%;
vertical-align:middle
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle
}
-->
</style>
</head>
<body>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
</body>
</html>
方法四(针对背景图片居中)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div里面图片垂直居中的几个例子</title>
<style type="text/css">
<!--
* {margin:0;padding:0;}
div {
width:500px;border:1px solid #666;
height:500px;
background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat
}
-->
</style>
</head>
<body>
<div></div>
</body>
</html>
分享到：
相关推荐
CSS 盒子水平居中、垂直居中和水平垂直居中的实现方法 在 CSS 中，实现盒子水平居中、垂直居中和水平垂直居中是非常常见的需求。本文将介绍五种不同的方法来实现这些效果，并对每种方法的优缺点进行分析。 一、...
在网页设计中，实现元素的垂直居中和水平居中是一项常见的需求，这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中，div元素作为布局容器广泛使用，而CSS则是样式控制的...
在CSS布局设计中，将元素水平居中对齐是一项常见的需求。无论是图片、宽度和高度固定的元素，还是自适应的动态元素，都有多种方法可以实现水平居中。以下是标题所提及的“css水平居中4种方式”的详细解析： 1. **...
CSS Grid布局允许更精细的控制，使用`align-items: center`和`justify-items: center`，或者`grid-template-areas`配合特定的占位符，可以实现元素的垂直和水平居中。 7. **使用伪元素进行居中**： 有时可以通过...
CSS 网页布局 DIV 水平居中的各种方法 在现代浏览器中，实现 DIV 的水平居中是一件非常简单的事情。下面我们将详细介绍几种常见的方法。 方法一：使用 margin:auto 这种方法是最简单的，直接将 DIV 的 margin ...
使用DIV+CSS实现水平垂直居中的优点是可以使网页布局更加灵活和灵活，可以根据需要随时调整DIV元素的位置和大小。此外，使用CSS样式还可以使网页更加美观和简洁。 四、DIV+CSS水平垂直居中的应用场景 DIV+CSS水平...
总之，实现CSS中的图片水平垂直居中是一个常见的挑战，但通过理解不同的布局模式和定位方式，我们可以灵活地选择合适的方法来解决这个问题。无论是在简单的网页还是复杂的响应式设计中，这些技巧都将大有裨益。
以下是一些主要的CSS技术，它们可以帮助你实现"css实现垂直居中"： 1. **Flexbox布局** Flexbox是现代CSS布局模式，特别适合处理容器内子元素的对齐问题。要实现垂直居中，可以设置容器的`display`属性为`flex`，...
对于水平居中，可以结合 `calc()` 和自动外边距。但是，这种方法不适用于垂直居中，除非容器的高度是固定的： ```css .centered-content { width: 100%; /* 水平填充容器 */ margin: auto; /* 水平居中 */ } ...
例如，垂直居中和水平居中可以分别使用Grid和Flexbox来实现。 在提供的`demo.html`文件中，可能包含了这些居中布局的示例代码。`logo.png`可能是用来测试这些布局效果的图片。通过查看和分析这些文件，可以进一步...
在网页设计中，让元素在页面上垂直和水平居中是一项常见的需求，特别是在CSS2.1规范中。本文将深入探讨如何使用CSS2.1来实现这一目标，无论是对于已知宽高还是未知宽高的块级元素（div）。首先，我们需要理解CSS布局...
首先，我们可以使用CSS的Flexbox布局来实现图片的水平垂直居中。Flexbox是一个强大的容器模型，它允许我们轻松地调整子元素的布局、对齐和分布，而无需复杂的定位技巧。 1. 创建一个包含图片的容器： ```html `...
/* 水平居中 */ align-items: center; /* 垂直居中 */ } ``` 4. **Grid布局** CSS Grid布局提供了一种二维的布局方式，可以同时处理行和列。对于图片垂直居中： ```css .container { display: grid; place...
在这个问题中，我们将讨论如何使用CSS将两个button按钮实现垂直和水平居中的方法，主要聚焦于一种使用`position: absolute`和`margin: auto`的技术。这种方法适用于知道元素宽度和高度的情况。 首先，我们需要创建...
以上就是使用CSS（特别是Flexbox和Grid布局）以及JavaScript实现图片在div中垂直/水平居中的方法。这些技巧不仅适用于图片，还可以应用于其他类型的元素，提高了网页布局的灵活性和可维护性。在实际项目中，应根据...
"CSS 实现垂直居中水平居中的几种方式" CSS 中实现垂直居中水平居中的几种方式是非常重要的，以下是几种常见的实现方式： 1. 容器内（Within Container） 在容器内实现垂直居中水平居中可以通过设置容器的 ...
/* 水平居中 */ } div.greenBorder { border: 1px solid green; background-color: ivory; } ``` 1. **Body 和 HTML 元素**：将`body`和`html`元素的高度设置为100%，确保外层容器的高度能够填充整个可视区域。...
/* 水平居中 */ align-items: center; /* 垂直居中 */ } #box #funcs { background-color: #666; } #funcs ul { list-style: none; } #funcs ul li { width: 30px; height: 30px; border-radius: 30px;...