看到问此问题的很多，所以花点时间整理下，欢迎大家提意见，做补充修改，谢谢！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
width:500px;
height:500px;
border:1px solid #ccc;
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%;
width:276px;
height:110px
}
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
标准浏览器下另类方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
body {
margin:0;padding:0
}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
text-align:center;
margin:auto
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px;
vertical-align:middle
}
p:after {
content:".";font-size:1px;
visibility:hidden
}
-->
</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">
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #ccc;
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%;
width:276px;
height:110px;
vertical-align:middle
}
-->
</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">
<style type="text/css">
* {margin:0;padding:0;}
div {
width:500px;text-align:center;border:1px solid #f00;line-height:500px;
height:500px;font-size:500px
}
*>div{
font-size:12px
}
div img {
vertical-align:middle
}
</style>
<div>
<img src="http://www.google.com/intl/en/images/logo.gif" />
</div>
display:inline-block 方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
div {
display:table-cell;
height:300px;
width:500px;
text-align:center;
border:1px solid #000;
vertical-align:middle
}
</style>
<!--[if IE]>
<style type="text/css">
i {
display:inline-block;
height:100%;
vertical-align:middle
}
img {
vertical-align:middle
}
</style>
<![endif]-->
<div>
<i></i>
<img src="http://www.baidu.com/img/logo.gif" alt=""/>
</div>
最简单当然是背景图片的方法拉。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
* {margin:0;padding:0;}
div {
width:500px;border:1px solid #f00;
height:500px;
background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat
}
</style>
<div>
</div>
分享到：
相关推荐
css垂直居中（方法集合）
下面详细介绍在CSS样式定义中实现水平居中与垂直居中的方法。 首先，水平居中是一个非常常见的需求，可以通过多种CSS属性组合来实现。例如，设置元素宽度并使用margin属性来自动调整外边距。当需要在块级元素内部...
- **未知容器的大小而已知内容大小的水平和垂直居中问题**：利用`position`和`transform`属性。 - **已知容器的大小而未知内容大小的水平和垂直居中问题**：通过`flexbox`或`grid`布局实现。 - **容器的大小和内容...
至于垂直居中，则可能需要配合其他CSS属性和方法。 最后，文档讲解了CSS中滚动条overflow属性的用法。overflow属性控制当内容溢出其块级元素框时如何处理，它有两个主要值，分别是visible和scroll。如果设置为...
这个示例可能演示了使用Flexbox、Grid或传统的CSS定位方法（如`position: absolute`和`transform: translateY()`）来实现输入框的垂直居中。 10. **禁止右键、Ctrl+A和拖选**：在某些情况下，开发者可能希望限制...
### IE与FF的CSS兼容问题大集合 在前端开发中，不同浏览器对于CSS的支持程度不同，这往往会导致页面在不同的浏览器下显示效果不一致。本文将详细介绍Internet Explorer（IE）和Firefox（FF）两种浏览器之间常见的...
标题中的“让CSS兼容IE和Firefox的技巧集合”是指在网页设计中，针对Internet Explorer（IE）和Firefox这两种浏览器之间CSS样式兼容性问题的解决策略。描述中的“嘿呌，IE不再是个bug”暗示了这些技巧能帮助开发者...
`（自动外边距，适用于块级元素的垂直居中）。 3. HTML与CSS进阶： - 如何引入外部CSS文件？使用`<link>`标签，例如`<link rel="stylesheet" type="text/css" href="styles.css">`。 - 什么是浮动（float）和清除...
#### 技巧1：div的垂直居中问题 为了使div内的内容垂直居中，可以尝试以下方法： 1. **设置`vertical-align: middle;`**：这仅适用于内联元素或表格单元格，因此不适用于块级元素。 2. **调整行高`line-height`**：...
在CSS3中，我们可以利用`display: flex`属性来轻松地实现子元素的水平和垂直居中。创建一个包含居中div的容器，并应用以下样式： ```css .container { display: flex; justify-content: center; /* 水平居中 */ ...
CSS标签大全是指CSS语言中各种类型的标签的集合，本文将对这些标签进行详细的讲解和解释。 字体属性 字体属性用于控制文本的字体样式，包括字体大小、字体样式、行高、粗细、变体等。 * 字体大小（font-size）：...
10. 居中对齐：CSS提供了多种方法实现元素的水平和垂直居中，如使用`flexbox`的`justify-content: center; align-items: center;`，或者使用`grid`的`place-items: center;`，还有传统的使用负边距、绝对定位等方法...
`可以让内容在网格区域内水平和垂直居中。 ```css .container { display: grid; place-items: center; } ``` 4. 使用绝对定位：对于具有固定宽度的元素，可以通过设置元素的`position: absolute;`，然后调整`...
【CSS3标签集合】是关于CSS3样式定义和应用的详细介绍。CSS3是层叠样式表的第三版，它扩展了CSS2.1的功能，引入了许多新的标签、选择器和属性，使得网页设计更加丰富和灵活。 首先，CSS3提供了三种样式应用方式：...
居中对齐是网页设计中常见的需求，"精品css层居中.htm"可能讲解了如何利用margin、position、transform等属性将元素在页面中水平或垂直居中。 5. **CSS绘制图形** "CSS 达人 用CSS 画 的 房子.html"展示了CSS的...
9. Div的垂直居中问题 3 10. margin加倍的问题 3 11. IE与宽度和高度的问题 3 12. 页面的最小宽度 3 13. DIV浮动IE文本产生3象素的bug 3 14. IE捉迷藏的问题 3 15. float的div闭合;清除浮动;自适应高度 ...