水平居中的CSS实现

最新推荐文章于 2025-04-30 15:08:42 发布
原创 最新推荐文章于 2025-04-30 15:08:42 发布 · 179 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#CSS #XHTML #Google #HTML

方法一
<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…如发现问题有劳回复评论！ ...
B站的基于python的Opencv项目实战-唐宇迪.zip
08-22
B站的基于python的Opencv项目实战-唐宇迪.zip
借助 LLaMA 3 等大模型，为全球百余种语言个性化学习提供支持的对话类 AI Agent，适用于全球旅行与生活场景
08-22
资源下载链接为： https://pan.quark.cn/s/538a38db2c7e 借助 LLaMA 3 等大模型，为全球百余种语言个性化学习提供支持的对话类 AI Agent，适用于全球旅行与生活场景（最新、最全版本！打开链接下载即可用！）
一个基于 Python 的网易云音乐-音乐合伙人任务脚本，支持本地运行和 GitHub Actions 自动执行。.zi
08-22
一个基于 Python 的网易云音乐-音乐合伙人任务脚本，支持本地运行和 GitHub Actions 自动执行。.zip
fuint餐饮系统是一套专为餐饮行业设计的开源会员管理与营销解决方案_基于Java_SpringBoot_MySQL_Redis_Uniapp_Element_UI技术栈_前后端分.zip
08-22
fuint餐饮系统是一套专为餐饮行业设计的开源会员管理与营销解决方案_基于Java_SpringBoot_MySQL_Redis_Uniapp_Element_UI技术栈_前后端分.zip
基于Python_PyQT5的产生式动物识别系统.zip
最新发布
08-22
基于Python_PyQT5的产生式动物识别系统.zip
基于Python+Pytest+Requests+Allure+Yaml+Json实现全链路接口自动化测试.zip
08-22
基于Python+Pytest+Requests+Allure+Yaml+Json实现全链路接口自动化测试.zip
使用CSS实现Div水平居中的方法解析
以下是一些使用CSS实现Div水平居中的方法： 1. margin: 0 auto 这是最常见且兼容性较好的方法，适用于大部分现代浏览器，如Internet Explorer 7及以上版本，Firefox，Opera等。通过设置Div的左右外边距为自动（`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值