水平居中的CSS实现

最新推荐文章于 2025-04-30 15:08:42 发布
最新推荐文章于 2025-04-30 15:08:42 发布
阅读量179 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 心情 文章标签： CSS XHTML Google HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sz_kain/article/details/83701924
方法一
<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水平居中
weixin_29252171的博客
08-03 2170
一、使用CSS水平居中的三种情况 。1、行内元素(文本、图片等)；2、定宽块状元素 ；3、不定宽块状元素(3种方法)；二、具体解决方法。1、行内元素(文本、图片等)：给父元素设置 text-align：center;2、定宽块状元素 ：div{border:1px solid blue;width:350px;height:20px;margin:20px auto; /*水平居中：上下方向有2...
DIV水平垂直居中css实现代码
09-25
本文将详细介绍如何使用CSS来实现`DIV`的水平垂直居中，并提供相关的代码示例。 首先，我们可以使用绝对定位（`position: absolute`）的方式来实现`DIV`的居中。这种方法的关键在于利用`top`、`left`、`margin-top`...
CSS实现水平居中的四种方法
半夏_2021的博客
04-21 1486
CSS 实现水平居中的四种方法
6种方法实现css布局水平居中
web前端开发博客
07-02 5721
说到常见css布局，面试时经常也会考考大家，看对css知识掌握的咋样，对css盒模型理解没，比如会问css布局水平居中的方法或者css布局垂直居中的方法等，今天分享常见css布局水平居中的6种方法。 方法一：margin + width 1 2 3 4 5 6 7 8 9 10 11 ...
CSS——垂直水平居中
CYX_COMnn的博客
12-03 1094
垂直水平居中的方法有很多,小编这里知识讲解了小编在编写页面中常用的几种方法,方法虽然由于很多,但是我们在编写页面时,要根据页面的实际情况来选取最合适的方法来实现垂直水平居中。关于本篇文章,如果有错误或者是建议,请在评论区留言小编,小编这里会及时更修改,有其他更好的垂直水平居中方法也请留言小编,小编也会继续学习努力。
CSS实现水平居中的几种方法
weixin_52099241的博客
05-05 2449
CSS实现水平居中的几种方法
css 对话框 水平居中,css 水平居中的几种实现方式
weixin_35645460的博客
08-03 1676
前言设计是带有主观色彩的，同样网页设计中的 css 一样让人摸不头脑。网上列举的实现方式一大把，或许在这里你都看到过，但既然来到这里我希望这篇能让你看有所收获，毕竟这也是前端面试的基础。实现方式1、text-align 方式text-align 是入门最常用的属性，根据字面意思是文本对齐用的。只需在父级标签上设置即可，虽然内部的子元素不管是块级元素 or 非块级元素都可以使用，但需注意块级元素会占...
14种CSS实现水平或垂直居中的技巧
2401_89829025的博客
01-16 1381
时，绝对定位元素就抓到了可运用的空间了，这时你的margin:auto就生效了。我们将利用:before伪类元素设定为100%高的inline-block，再搭配上将需要居中的子元素同样设置成inline-block性质后，就能使用vertical-align: middle来达到垂直居中的目的了。此方式在以往其实是个非常棒的垂直居中解决方案，唯独需要特别处理掉inline-block元素之间的4-5px空间这个小缺陷，不用怕，设置父元素font-size: 0，子元素font-size: 15px即可。
CSS 轻松实现水平与垂直居中
weixin_44520557的博客
10-09 1620
在 Web 设计中，元素的居中对齐是一个常见的需求。无论是水平居中还是垂直居中，都能提升页面的视觉效果和用户体验。本文将介绍几种实现元素居中对齐的方法，并通过示例代码展示如何应用这些技巧。
CSS实现DIV水平与垂直居中方法总结
weixin_49562392的博客
04-30 894
标准方法关键点：必须声明DOCTYPE（推荐XHTML 1.0 Transitional DTD），否则IE不生效浏览器差异：Firefox直接生效，IE需DTD支持兼容性方案} /* 父级 */#center {/* 子级 *//* 防止文字继承居中 */【程序视点】助力打工人减负，从来不是说说而已！后续小二哥会继续详细分享更多实用的工具和功能。如果这篇文章对你有帮助的话，别忘了【在看】【】支持下哦~
css元素水平垂直居中
博哥的二进制世界
06-03 1843
/图片与文字垂直居中，但会有少量偏差，再通过。在应用一的基础上，给子项（元素） 添加 vertical-align: middle;//子元素相对父元素水平（主轴）居中。//子元素相对父元素垂直（交叉轴）居中。这种写法，在没有指定子元素宽高的情况下，也能让其在父容器中垂直居中。//给父元素加，弹性布局。margin-left:- 自身宽度一半;margin-top:-自身高度一半;
CSS 将两个button按钮垂直+水平居中
01-20
在这个问题中，我们将讨论如何使用CSS将两个button按钮实现垂直和水平居中的方法，主要聚焦于一种使用`position: absolute`和`margin: auto`的技术。这种方法适用于知道元素宽度和高度的情况。 首先，我们需要创建...
CSS 实现未知内容高度的垂直水平居中(改良版)
12-11
垂直居中在IE浏览器下的实现比较难实现，而更难实现的应该是未知内容高度的垂直水平居中！还好网上也有很多高人发布了一些解决的方法！这里我进行了一些改良，兼容FF，IE6，IE7，Opera…如发现问题有劳回复评论！ ...
计算机科学知识体系全面整理与系统归纳项目-包含数据结构与算法分析计算机网络协议详解操作系统原理剖析数据库系统设计编译原理实现计算机组成结构软件工程方法论人工智能基础.zip
08-23
计算机科学知识体系全面整理与系统归纳项目_包含数据结构与算法分析计算机网络协议详解操作系统原理剖析数据库系统设计编译原理实现计算机组成结构软件工程方法论人工智能基础.zipAI工具在开发实践中的应用
ForestBlog 是基于 go 语言开发的，适合用来学习和展示 markdown 文档的精美博客_).zip
最新发布
08-23
ForestBlog 是基于 go 语言开发的，适合用来学习和展示 markdown 文档的精美博客_).zip
### 企业架构设计方法论详解（豪华版）
08-23
内容概要：该PPT详细介绍了企业架构设计的方法论，涵盖业务架构、数据架构、应用架构和技术架构四大核心模块。首先分析了企业架构现状，包括业务、数据、应用和技术四大架构的内容和关系，明确了企业架构设计的重要性。接着，阐述了新版企业架构总体框架（CSG-EAF 2.0）的形成过程，强调其融合了传统架构设计（TOGAF）和领域驱动设计（DDD）的优势，以适应数字化转型需求。业务架构部分通过梳理企业级和专业级价值流，细化业务能力、流程和对象，确保业务战略的有效落地。数据架构部分则遵循五大原则，确保数据的准确、一致和高效使用。应用架构方面，提出了分层解耦和服务化的设计原则，以提高灵活性和响应速度。最后，技术架构部分围绕技术框架、组件、平台和部署节点进行了详细设计，确保技术架构的稳定性和扩展性。 适合人群：适用于具有一定企业架构设计经验的IT架构师、项目经理和业务分析师，特别是那些希望深入了解如何将企业架构设计与数字化转型相结合的专业人士。 使用场景及目标：①帮助企业和组织梳理业务流程，优化业务能力，实现战略目标；②指导数据管理和应用开发，确保数据的一致性和应用的高效性；③为技术选型和系统部署提供科学依据，确保技术架构的稳定性和扩展性。 阅读建议：此资源内容详尽，涵盖企业架构设计的各个方面。建议读者在学习过程中，结合实际案例进行理解和实践，重点关注各架构模块之间的关联和协同，以便更好地应用于实际工作中。
基于Python+Django的旅游景点及路线推荐系统：协同过滤与机器学习的应用
08-23
如何使用Python和Django框架构建一个旅游景点及路线推荐系统。系统不仅实现了常见的登录、查看景点信息、搜索景点、评论评分等功能，还特别引入了四种推荐算法——热门推荐（基于评分）、随机推荐、猜你喜欢（基于协同过滤）以及类似推荐（基于地点）。作者深入探讨了每种推荐算法的具体实现方法和技术细节，如利用Django ORM进行高效查询、使用geopy库计算地理距离、优化协同过滤算法等。此外，文中还提到了一些实用技巧，如通过记录用户的登录位置来提高首次推荐的准确性，以及使用Django Admin快速搭建管理员后台。 适合人群：对Web开发感兴趣的开发者，尤其是熟悉Python和Django框架的技术人员。 使用场景及目标：适用于希望深入了解推荐系统实现机制并应用于实际项目的开发者。通过学习本文，读者能够掌握如何结合多种推荐算法提升用户体验，同时了解如何优化系统性能。 其他说明：作者强调推荐系统的设计不仅要考虑算法的有效性，还要兼顾用户的实际需求和体验。未来计划进一步改进系统，加入更多个性化元素，如实时用户画像等。
【Matlab语音处理】独立分量分析 Independent Component Analysis.zip
08-23
资 源 简 介 独立分量分析(Independent Component Analysis，简称ICA)是近二十年来逐渐发展起来的一种盲信号分离方法。它是一种统计方法，其目的是从由传感器收集到的混合信号中分离相互独立的源信号，使得这些分离出来的源信号之间尽可能独立。它在语音识别、电信和医学信号处理等信号处理方面有着广泛的应用，目前已成为盲信号处理，人工神经网络等研究领域中的一个研究热点。本文简要的阐述了ICA的发展、应用和现状，详细地论述了ICA的原理及实现过程，系统地介绍了目前几种主要ICA算法以及它们之间的内在联系， 详 情 说 明 独立分量分析(Independent Component Analysis，简称ICA)是近二十年来逐渐发展起来的一种盲信号分离方法。它是一种统计方法，其目的是从由传感器收集到的混合信号中分离相互独立的源信号，使得这些分离出来的源信号之间尽可能独立。它在语音识别、电信和医学信号处理等信号处理方面有着广泛的应用，目前已成为盲信号处理，人工神经网络等研究领域中的一个研究热点。 本文简要的阐述了ICA的发展、应用和现状，详细地论述了ICA的原理及实现过程，系统地介绍了目前几种主要ICA算法以及它们之间的内在联系，在此基础上重点分析了一种快速ICA实现算法一FastICA。物质的非线性荧光谱信号可以看成是由多个相互独立的源信号组合成的混合信号，而这些独立的源信号可以看成是光谱的特征信号。为了更好的了解光谱信号的特征，本文利用独立分量分析的思想和方法，提出了利用FastICA算法提取光谱信号的特征的方案，并进行了详细的仿真实验。 此外，我们还进行了进一步的研究，探索了其他可能的ICA应用领域，如音乐信号处理、图像处理以及金融数据分析等。通过在这些领域中的实验和应用，我们发现ICA在提取信号特征、降噪和信号分离等方面具有广泛的潜力和应用前景。
MATLAB实现虚拟电厂日前鲁棒优化调度——应对源荷双重不确定性
08-23
内容概要：本文介绍了基于MATLAB和CPLEX工具实现的虚拟电厂日前鲁棒优化调度模型。该模型针对光伏出力和负荷功率的双重不确定性进行了处理，采用了鲁棒优化方法来提升系统稳定性并降低风险。文中详细解析了从数据准备到模型构建、求解过程再到结果分析的具体步骤。通过引用相关文献，进一步完善了模型的理论基础和技术细节。最终，该模型能够有效提高电力系统的稳定性和可靠性，为虚拟电厂的实际运行提供了重要的参考依据。 适合人群：对电力系统优化调度感兴趣的科研人员、工程师及研究生。 使用场景及目标：适用于需要处理源荷双重不确定性的虚拟电厂或微网单元的日前调度任务，旨在提高调度决策的经济性和稳定性。 其他说明：本文不仅提供了详细的MATLAB代码实现，还深入探讨了鲁棒优化法的应用及其在电力系统中的意义。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值