将 div 水平和垂直居中,并在调整父级大小时保持居中[重复]

2023-12-29

我想始终将 div 水平和垂直居中。

我可以减少/增加窗口的宽度,div 将通过始终保持在窗口的中心进行响应

.cent
{
  height:50px;
  width:50px;
  background-color:black;
  margin:auto;
}

这里有一个JSFiddle 示例 http://jsfiddle.net/tVuS6/我目前所拥有的。 但我也想保持 div 垂直居中,这样如果我减少/增加窗口的高度,div 就会通过停留在窗口的中间来做出响应。

对于该示例,我希望在窗口调整大小时保持黑盒垂直居中,就像它始终水平居中一样。


你可以这样做CSS 表格:

JsFiddle http://jsfiddle.net/danield770/tVuS6/14/

Markup

<div class="container">
    <div class="cent"></div>
</div>

(相关)CSS

    html,body
    {
        height: 100%;
    }
    body
    {
       display: table; 
       margin: 0 auto;
    }
    
    .container
    {  
        height: 100%;
        display: table-cell;   
        vertical-align: middle;    
    }
    .cent
    {
        height: 50px;
        width: 50px;
        background-color: black;      
    }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 div 水平和垂直居中,并在调整父级大小时保持居中[重复] 的相关文章

  • IE jquery click 仅适用于 li 中的文本,不适用于整个框

    我创建了一系列作为 li 的按钮 我希望用户能够单击它们 ul class item list li class item button style color 4bb2c5 1 li li class item button style
  • 禁用 Bootstrap 中的链接

    第一个例子没有成功 我需要始终有一个列表来禁用链接 或者我的第一个演示有什么问题 a class disabled href Disabled link a ul class nav nav pills li class disabled
  • 滚动部分滚动并溢出

    我正在尝试使用脚本 Scrollify https github com lukehaas Scrollify https github com lukehaas Scrollify 但我的部分比用户的屏幕长 这意味着您首先必须向下滚动才能
  • 使用 Javascript/jQuery 和 CSS 更改 PNG 颜色

    我有一个黑色的心 PNG http 1 bp blogspot com yq ZSKg39Tk TOvzVx9sC5I AAAAAAAAAb0 GcN4O Ciq3s s1600 black heart png我想用不同的颜色显示 如何使用
  • 由于内容不可压缩,谷歌浏览器中出现了新的复合层

    当 chrome profiler 说 图层是单独合成的 因为它无法被挤压 时 它到底意味着什么 我正在对我的 html 进行更改 并在相对 div 内引入了一个固定位置 div 并给出了will change transform在上面 完
  • 允许指针(单击)事件穿过元素,同时保持滚动功能

    我的目标是拥有一个允许 下面要点击 交互的元素 滚动 众所周知 1 的解是pointer events none 这正如中所描述的单击 DIV 到底层元素 https stackoverflow com questions 3680429
  • scrapy获取同一个类的第n个子文本

    我附上了一张照片 我面临的问题是获取同一类的第一个元素 我想得到 adxHeader gt adxExtraInfo 1st one gt adxExtraInfoPart 1st one gt a text 我编写了以下代码但不起作用 任
  • 通过 HTML5 文件和 URL API 正确创建和提供 PDF Blob

    好吧 假设我有文档数据存储在某处 让我们任意取this pdf http www grida no climate ipcc tar wg1 pdf tar 01 pdf 问题 1 我想要做的是对此 URL 进行 AJAX 调用 因为我需要
  • 检测 iframe 内容加载失败

    我可以使用以下命令检测 iframe 的内容何时加载load事件 不幸的是 就我的目的而言 这有两个问题 如果加载页面时出现错误 404 500 等 则永远不会触发加载事件 如果某些图像或其他依赖项加载失败 则会照常触发加载事件 有什么方法
  • php在html页面中创建额外空间

    我是网络开发新手 我真的被这个愚蠢的问题困扰了 当我在 html 代码之前插入 php 代码时 如下所示 它在我的页面顶部创建了额外的空白空间 并将整个内容 推下 是否有可能以某种方式避免创建额外的空间 如果 php 代码位于 html 的
  • JSDoc:如何在生成的文档中包含自定义 css 文件模板?

    JS文档docs https jsdoc app about configuring default template html say 将图像目录复制到输出目录 复制全部 将 myproject static 中的静态文件复制到输出目录
  • 为什么我的 onclick 事件自动触发

    加载页面时最初显示 Hello World 我希望它仅在单击按钮后显示 我知道我可以通过向按钮添加内联事件侦听器来做到这一点 我可以只用脚本编写所有这些代码吗
  • 当我“显示:无”一个 SVG 时,另一个(独立的)SVG 会以不同的方式呈现

    我已经伤透了几个小时了 这没有任何意义 我将遇到的问题减少到这个codepen https codepen io Octopous pen OJORpJQ https codepen io Octopous pen OJORpJQ HTML
  • 如何使用 CSS 将 div 置于表格中心?

    我正在尝试向我的网站之一添加幻灯片 整个页面布局在一个 HTML 表格中 我非常讨厌它并且没有选择 我想将我的幻灯片放在该特定列的中心 我的 CSS 如下所示 slideshow position relative slideshow IM
  • 转换 SVG 过滤器

    我正在尝试创建一个像 SVG 圆圈上的阴影这样的材质设计 我希望当您单击圆圈时 这个阴影能够以良好的过渡来增长 但目前我正在努力弄清楚是否可以为这种过渡设置动画 所以我希望有人能够提供帮助 我添加了一个到目前为止所得到的小例子 一个带有阴影
  • 在IOS中,引导模式中的iframe无法滚动

    我在引导程序模态体内有一个 iframe div class modal fade div class modal dialog div class modal content div class modal header div div
  • 响应式菜单:悬停子菜单显示错误

    简而言之 我根据教程创建了一个响应式菜单 当您将鼠标悬停在投资组合按钮上时 菜单应该显示子菜单 而在移动模式下 您需要按该按钮才能显示子菜单 效果很好 问题是该教程有一个错误 如果您在桌面模式下按组合按钮 子菜单将不会再次显示 除非您按 单
  • html 表格顶部对齐?

    我怎样才能让图像和内容向右顶部对齐 如你所见 我尝试了 valign top table border 0 cellspacing 0 cellpadding 0 tbody tr valign top td valign top img
  • 在CSS中,有什么比使其成为块元素更好的强制元素换行的方法呢?

    我有一个 H3 标题 我想将其样式设置为具有特定的背景颜色 但不让元素的背景占据父元素的整个宽度 鉴于 H3 默认情况下是块元素 我的样式需要将该元素更改为内联块元素 或者只是内联内联元素 如下所示 h3 background color
  • html5 canvas 使用图像作为蒙版

    是否可以使用具有形状的图像作为整个画布或画布内图像的蒙版 我想将图像放置在画布中 并在图像上添加蒙版 然后将其另存为新图像 您可以使用 source in globalCompositeOperation 将黑白图像用作蒙版 首先 将蒙版图

随机推荐

  • Android Studio 2.2.3 - minSdk(API21) > deviceSdk(API17) [重复]

    这个问题在这里已经有答案了 I get this error when I try to run an android tablet as an emulator Does it mean my device is older than t
  • jQuery 检查元素是否具有以某个字符串开头的类

    我需要循环访问页面中的一些元素 然后 对于每个元素 如果它有一个以 C 开头的类 则执行某些操作 dialog li each function if this hasClass C do something 这可能听起来很愚蠢 但是我应该
  • R 中的困难聚合,对球队篮球统计数据进行分组

    预先感谢您对此的任何帮助或建议 这是我正在使用的数据框的简短示例 boxscore stats structure list game id c 157046L 157046L 157046L 157046L 157046L 157046L
  • WCF WebGet 和 ICollection<>

    我正在尝试从 REST WCF 服务返回通用 ICollection 以下应该可行吗 ServiceContract public class WebConfigurationManager WebGet OperationContract
  • 有什么相对简单的方法来确定一个句子是英语的概率?

    我有许多字符串 字符集合 它们代表不同语言的句子 例如 你好 我叫乔治 Das brot is the gut etc 我想为每个句子分配分数 从 0 1 表明它们是英语句子的可能性 是否有一个公认的算法 或Python库 可以做到这一点
  • Java中删除字符串中的重复行

    我的字符串是 EEE EEE AAA BBB CCC BBB DDD CCC 但我需要这个字符串没有相同的行 像这样 EEE AAA BBB CCC DDD 我该怎么做 这是一个简单的答案 StringBuilder builder new
  • C# 异步任务无限期等待

    我正在尝试使用 异步 和 等待 提供的功能来异步下载网页内容 但我遇到了任务永远等待完成的问题 您能否让我知道以下代码片段有什么问题 protected void Page Load object sender EventArgs e va
  • Python 中的静态数组

    我正在学习如何用 python 编程 同时也在学习理论作为计算机科学课程的一部分 在编程中 我知道我可以通过使用 append 函数向数组添加其他变量 但是在我的理论课程中 我们被告知数组的大小既不能增加也不能减少 这在Python中是如何
  • 我希望我的 pre('save') 猫鼬函数只运行一次

    我不知道标题中的确切要求是否可能 但如果不可能 我真的很感激一个替代解决方案 我有猫鼬的预保存方法 ownerSchema pre save function next const owner this bcrypt genSalt 10
  • 创建对象时出现错误“存在显式转换(是否缺少强制转换)”:

    我有兴趣学习 OOP 概念 在尝试使用继承的简单程序时 我注意到这个错误 我不明白为什么会出现这个错误 我给出了下面简单的 C 代码 class Animal public void Body Console WriteLine Anima
  • *onbeforeunload* 是否在 Safari (macOS) 上缓存?

    我添加了一个事件监听器beforeunload 按照惯例 https developer mozilla org en docs Web API WindowEventHandlers onbeforeunload在我的 JS ReactJ
  • 重新使用现有 Microsoft Identity 用户表时密码(哈希)不匹配

    我们有一个现有的 SQL 数据库微软身份表 最初由 ASP NET Core 应用程序生成 我们还有一个 ASP NET 4 应用程序 它也使用 Microsoft Identity 我们希望 ASP NET 4 应用程序能够使用同一数据库
  • subversion中“让深度粘性”有什么作用?

    我很难找到有关在 SVN 工作副本上使用粘性深度设置的行为的明确文档 在 SVN 中 当使用 更新到修订版本 对话框时 会有一个 使深度粘性 复选框 使深度粘性和非粘性之间有哪些有效区别 当深度为粘性时 您每次更新时都将使用相同的设置进行更
  • PHP以真正的二进制方式读取二进制文件

    我在谷歌上搜索了我的问题 但没有找到解决方案 我想读取一个文件并将缓冲区转换为二进制 例如 10001011001011001 如果我从文件中有这样的东西 bmoov lmvhd tF tF K T trak tkh d tF tF K e
  • Symfony 2:安装并启用 intl 扩展

    我在用着XAMPP for Windows并决定尝试一下Symfony 2 当我到达时Symfony Configuration它建议我安装并启用的页面intl 我尝试阅读PEAR s and PECL s指导 因为我完全0关于这个主题 开
  • std::ostringstream 覆盖初始化字符串

    以下代码会生成 0004567 铿锵 7 https repl it agustinf ostringstream bug or anti feature main cpp include
  • 连接到 Github 时“无法生成 ssh”,但 ssh -T [电子邮件受保护] 有效?

    我很难让 Github Netbeans 正常工作 我想将 ssh 与 git 在 Windows 7 上 结合使用来提交或克隆项目 但我不断收到此错误消息 git clone email protected cdn cgi l email
  • NSOutlineView 缩进问题

    我使用 NSOutlineView 对象来表示文件结构 并发现它不会正确缩进任何可扩展的子项 尽管它会缩进不可扩展的子项 这是一张图片来说明我的意思 在此示例中 AnotherFolder 是 Folder2 的子级 但它没有与其他缩进文件
  • F# 中的代码分析

    作为一名 C 开发人员 我从 Microsoft 的代码分析中受益匪浅 然而 在 F 中 代码分析似乎并不是开发周期的一个组成部分 我花了一段时间才在 F 项目上启用 CA 但这博客有帮助 http blog nikosbaxevanis
  • 将 div 水平和垂直居中,并在调整父级大小时保持居中[重复]

    这个问题在这里已经有答案了 我想始终将 div 水平和垂直居中 我可以减少 增加窗口的宽度 div 将通过始终保持在窗口的中心进行响应 cent height 50px width 50px background color black m