<style>
.box1,.box2{
width:500px;
height:500px;
/*非IE的主流浏览器识别的垂直居中的方法，无需其他即可*/
display: table-cell;
vertical-align:middle;
/* 针对IE的Hack */
*display: block;
*font-size: 440px;/*约为高度的0.873，500*0.873 约为440，font-size实际上它设置的是字体中字符框的高度，根据box的告诉设置大约为高度的0.873就恰好在box里垂直居中*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
/*设置水平居中*/
text-align:center;
border: 1px solid #eee;
}
.img{
vertical-align:middle;
}
.text{
width:20px;
margin:0px auto;/* 块级元素的居中处理可以使用margin：0px auto，但是要注意需要保证外边的width和里面的块的width都确定，此外关于行级元素不起作用 */
}
.text2{
width:20px; /*关于行级元素，可以直接使用外面块级或者行级元素的text-align属性即可*/
}
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<header>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</header>
<body>
<div class="box1">
<img class="img" src="./themes/qingdao/public/images/login/btns_login.png">
</div>
<div class="box2">
<div class="text">
你好
</div>
<span class="text2">
你好吗
</span>
</div>
</body>
</html>
相关推荐
在网页设计中，CSS（Cascading Style Sheets）布局是一个重要的方面，而垂直居中问题则是许多开发者在创建响应式和动态网页时常常遇到的挑战。"CSS实现完美垂直居中"这一主题深入探讨了如何利用CSS技术使元素在容器...
总之，实现CSS中的图片水平垂直居中是一个常见的挑战，但通过理解不同的布局模式和定位方式，我们可以灵活地选择合适的方法来解决这个问题。无论是在简单的网页还是复杂的响应式设计中，这些技巧都将大有裨益。
本文将详细介绍DIV+CSS水平垂直居中的方法和实现原理。 一、使用position:absolute实现水平垂直居中 使用position:absolute可以将DIV元素水平垂直居中，方法是将DIV元素的left和top属性设置为50%，然后通过margin-...
CSS 盒子水平居中、垂直居中和水平垂直居中的实现方法 在 CSS 中，实现盒子水平居中、垂直居中和水平垂直居中是非常常见的需求。本文将介绍五种不同的方法来实现这些效果，并对每种方法的优缺点进行分析。 一、...
在网页设计中，实现元素的垂直居中和水平居中是一项常见的需求，这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中，div元素作为布局容器广泛使用，而CSS则是样式控制的...
在网页设计中，"DIV+CSS 图片垂直居中效果"是一个常见的布局需求，它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述： 1. **基础概念** - **DIV**：HTML中的`<div>`元素是一...
div框水平垂直居中跟内容垂直居中
### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中，实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说，这相对容易实现。但对于那些高度未知或者动态变化的元素，尤其是嵌套在另一个未知...
/* 水平垂直居中 */ height: 100vh; width: 100%; background-color: #f0f0f0; } .container img { max-width: 100%; max-height: 100%; object-fit: cover; } ``` 以上就是关于使用CSS设置未知尺寸图片在...
本篇文章将详细介绍如何通过 CSS 实现内容的水平垂直居中，并且无需指定具体的宽度和高度。 #### 步骤详解 1. **创建容器 div**： - 首先创建一个外层 div，为其分配一个自定义的 ID。 2. **嵌套内部 div**： ...
首先，我们可以使用CSS的Flexbox布局来实现图片的水平垂直居中。Flexbox是一个强大的容器模型，它允许我们轻松地调整子元素的布局、对齐和分布，而无需复杂的定位技巧。 1. 创建一个包含图片的容器： ```html `...
其中，如何实现图片在容器中的垂直居中是一个常见的需求，尤其在响应式设计和现代网页布局中更为重要。本篇文章将深入探讨如何利用CSS实现图片的垂直居中效果。 首先，我们来看几种常见且实用的CSS方法： 1. **...
综上所述，针对“div不定宽高的水平和垂直居中”以及兼容IE67的需求，我们可以选择使用CSS传统方法（如绝对定位）或者结合JavaScript来实现。考虑到不同的浏览器兼容性和场景适应性，应根据实际项目需求来选择最合适...
div+css文本水平垂直居中，兼容ie、谷歌等浏览器
这个主题，"DIV水平垂直居中"，通常涉及到CSS布局技术和可能的JavaScript辅助方法。在这个场景中，描述提到使用了jQuery来实现，这是一种流行的JavaScript库，提供了丰富的功能和简便的API。 首先，我们来探讨CSS中...
在网页设计中，让元素在页面上垂直居中是一项常见的需求。CSS（Cascading Style Sheets）提供了多种方法来实现这一目标。以下是一些主要的CSS技术，...在实践中不断尝试和学习，可以让你更好地掌握CSS垂直居中的技巧。
本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先，我们要理解CSS布局的基本概念。在网页中，元素的位置可以通过设置`position`属性来控制，其主要值有`static`（默认值）、`relative`、`absolute`和`...
"CSS 实现垂直居中水平居中的几种方式" CSS 中实现垂直居中水平居中的几种方式是非常重要的，以下是几种常见的实现方式： 1. 容器内（Within Container） 在容器内实现垂直居中水平居中可以通过设置容器的 ...
在IE7+中实现垂直居中，我们可以采用多种方法，每种方法都有其适用场景和优缺点。以下是一些常见的技术： 1. **CSS Table布局**： - 设置父容器`display: table`，子元素`display: table-cell`。 - 使用`vertical...
图片水平垂直居中的css代码，个人随便写点，请大家不要骂我啊