我如何让一个绝对定位的div与一个固定的div水平居中？
要让一个绝对定位的div与一个固定的div水平居中，可以使用以下方法：
- 使用Flexbox布局：
- 将两个div的父容器设置为flex布局，通过设置
display: flex; justify-content: center;使其水平居中。 - 将绝对定位的div设置为
position: absolute; left: 50%; transform: translateX(-50%);，使其相对于父容器水平居中。
- 将两个div的父容器设置为flex布局，通过设置
- 使用绝对定位和负边距：
- 将绝对定位的div设置为
position: absolute; left: 50%; transform: translateX(-50%);，使其相对于父容器水平居中。 - 将固定的div设置为
position: fixed; left: 0; right: 0;，使其覆盖在绝对定位的div上。 - 通过设置固定div的宽度和高度，以及背景色等样式，使其看起来与绝对定位的div一致。
- 将绝对定位的div设置为
- 使用表格布局：
- 将两个div的父容器设置为
display: table; width: 100%;，使其以表格布局方式展示，并占满整个宽度。 - 将绝对定位的div设置为
display: table-cell; text-align: center; vertical-align: middle;，使其在表格单元格中水平居中。 - 将固定的div设置为
display: table-cell; text-align: center; vertical-align: middle;，使其在表格单元格中水平居中。
- 将两个div的父容器设置为
以上是三种常用的方法，可以根据具体情况选择适合的方式来实现水平居中效果。
请注意，以上答案中没有提及任何特定的云计算品牌商或产品。
相关·内容
1回答
CSS Div位置行为
、、、
我在理解div位置(相对、绝对、固定)属性时遇到了问题。我基本上有一个绝对的div居中。在div中，应该可以垂直和水平滚动。在这个div里面应该是一个固定的标题，它的宽度大于屏幕( overflow )，还有一个内容div，它在垂直和水平方向上都有溢出。
html,
body {
height: 100%;
width: 100%;
background: #fff;
margin: 0px auto;
padding: 0px auto;
position: fixed;
}
.container {
width: calc(10
浏览 2提问于2016-05-21得票数 0
我有一个水平和垂直居中的div。问题是，如果我向下滚动，div也会向下滚动并停留在中心。我怎么解决它不能向下滚动的问题？
现在它完美地居中(我使用页边距是因为图片的大小(200px X 200px))。但当向下滚动时，它会停留在中间。
.logo {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
<image class="logo&#
浏览 11提问于2017-06-28得票数 3
回答已采纳
3回答
我正在做一个水平居中的div。我使用下面的代码将我的div放在body标记的垂直和水平居中，但似乎只有垂直的部分可以工作。我怎样才能让水平部分也能工作。提前谢谢。
body
{
background-color: #081418;
font-size: .75em;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
text-align: center;
}
.OuterRim
{
border:5px sol
浏览 0提问于2013-02-12得票数 2
回答已采纳
我遇到了一个与类似的问题，但我希望我的右div水平居中。所以我在右边的div上有"margin: auto;“。
在我将"overflow-y: auto“(或滚动)添加到右侧div之前，这个方法运行得很好。在此之前，页边距是从整个页面宽度测量的。添加后，它从左div的右边缘开始测量，所以它不是在页面上居中，而是在页面的其余部分居中。
该问题的简单演示位于：
浏览 3提问于2012-07-03得票数 0
回答已采纳
如何使图片水平居中，同时与容器底部对齐？
我已经能够让图像在水平方向居中。我还可以自己对齐容器的底部。但我不能同时做这两件事。
这就是我所拥有的：
.image_block {
width: 175px;
height: 175px;
position: relative;
margin: 0 auto;
}
.image_block a img {
position: absolute;
bottom: 0;
}
<div class="image_block">
<a href="...">&
浏览 2提问于2008-11-18得票数 40
回答已采纳
3回答
我想在屏幕中央打开一个div (水平和垂直)。
var documnetWidth = $(document).width(),
documentHeight = $(document).height(),
widgetFormHeight = widgetForm.height(),
widgetFormWidth = widgetForm.width();
widgetForm.css({
top: documentHeight / 2 - widgetFormHeight / 2,
left: documnetWidth / 2 - widgetFormWidth
浏览 0提问于2012-09-01得票数 0
假设我有两个div：
<div id="divOuter">
<div id="divInner"></div>
</div>
假设外部div在页面下方约3/4，居中(水平)在屏幕上，宽度为200px。显然，内部div最初会在这个位置。如何将内部div保持在相同的垂直位置(即当前的垂直位置)，同时将其一直移动到屏幕的左侧？
浏览 0提问于2013-04-24得票数 0
我想在表格单元格内显示一个DIV，它对它来说太窄了。我使用overflow:hidden来允许div溢出表格单元格的一侧，但现在我想将它居中，以便它在两侧溢出一点，而不是在一侧溢出大量的数据。
DIV对于DIV来说太窄了，如何在TD内水平居中DIV？
浏览 0提问于2010-05-06得票数 3
1回答
具有自动宽度的自动边距
、、、
我正在尝试居中放置一个容器，里面有一排排方形的div。然而，为了让它正常工作，我已经将它简化为一个容器中的一个正方形。它需要自动宽度，但也需要居中。如何使使用自动宽度的容器div居中？只有当"panel“div的宽度固定时，它才会居中。
HTML FILE
<div class="panel">
<div class="item"></div>
</div>
CSS FILE
.panel {
position:absolute; /*This seems necessary to
浏览 0提问于2012-08-11得票数 0
我有一个绝对定位的div (因为它包含的子div本身是绝对定位的)，我想要水平居中。
我可以使用下面的CSS实现这一点
width : 512px;
position : absolute;
left : 50%;
margin-left :-256px; // half width of div
(在中完成测试)
但是，当窗口不够大时，div会向左溢出。
有没有办法在页面足够大的时候让它居中，而在其他情况下左对齐(只使用CSS)？
浏览 1提问于2012-10-02得票数 0
回答已采纳
2回答
任何人有任何想法，我如何水平居中下一页。正如你所看到的，表格部分可以很容易地居中，但是如何对一组绝对定位的div做同样的事情。
谢谢,
浏览 0提问于2011-11-29得票数 0
2回答
在div中居中固定图像
、、、
我在这里创建了一个JSFiddle：
我尝试做的是让down_arrow.png位于它们包含的div的中心。我能够使用自动边距将up_arrow.png居中。我使用fixed属性来使用它们作为页脚，因为我希望它们位于div的底部，而不管分辨率如何。
我的问题是，在包含div的宽度内居中底部固定图像的最好方法是什么？
小提琴中的一些代码(我在StackOverflow格式化方面遇到了问题)：
.scroll-arrow-down {
position: fixed;
bottom:0;
}
我应该补充一点，我根本不关心IE的破解/变通，这个应用程序
浏览 0提问于2013-01-09得票数 1
回答已采纳
2回答
所以我有了这个，想让它在垂直和水平方向居中：
<div id="hd_hype_container" style="position:relative;overflow:hidden;width:600px;height:405px;">
<script type="text/javascript" charset="utf-8" src="hd/hd.js?88618"></script>
</div>
我已经尝试了所有的解决方案，但似乎没有一个对我有效。我
浏览 0提问于2011-08-26得票数 2
回答已采纳
2回答
我总是使用JQuery来水平居中div，但这次我做的项目没有任何JQuery或Javascript支持。
所以我想只使用css将div居中，并且确定不使用标签。
附注: div有z索引和绝对位置。
提前谢谢你，
浏览 1提问于2012-10-16得票数 0
回答已采纳
6回答
我有一个div，我想在不改变垂直位置的情况下，在浏览器窗口内水平地居中。这是我的div：
<div id="divErrorMessage" class="ErrorClientSide">
<div class="ui-icon ui-icon-info" style="float: left; margin-right: 6px;"></div>
<div id="divErrorMessageText" style="margin-left:
浏览 2提问于2015-03-27得票数 1
回答已采纳
这是我的
<div class="overlay">
<div id="loading">
<img src="styles/images/30.gif">
</div>
</div>
我想让它垂直和水平地居中。
该图像仅为水平居中，如下面的屏幕快照所示：
我的CSS如下所示：
.overlay {
background: #e9e9e9;
display: none;
position: absolute;
top: 0;
right
浏览 3提问于2017-04-29得票数 1
回答已采纳
3回答
我在使用了JsFiddle。我将其更改为将div显示为方形对话框(水平和垂直居中)。结果是在。
如你所见，水平居中很容易，但我不能让它垂直居中。有人知道如何用纯CSS做到这一点吗？
编辑代码如下：
<div class="blind">
<div class="wrapper">
<div class="main">
I'm your div with an aspect-ratio of 1:1!
</div>
<
浏览 0提问于2013-12-02得票数 0
我想创建一个从浏览器窗口顶部到底部水平居中的内容块的页面。我已经意识到表格不是设计布局的正确方式。从上到下的块不是问题所在：
<div style="position:absolute;top:0px;width:800px;height:100%;background-color: #fff;">
</div>
但是我不能使这个Div居中。我试过了
“页边距:自动”
但没有效果。这使Div中的文本居中，而不是Div本身在屏幕上居中。
浏览 2提问于2011-06-30得票数 0
回答已采纳
1回答
我有一个div，它创建为：
<div class="test" style="width:600px; margin:0 auto;"></div>
它的水平位置是好的，但是我想从页面的顶部掉下25 it(可能更多)。
我尝试过将top:25px;添加到样式中，并添加了测试类css，但这并没有帮助。
div.test{
color:black;
text-align:center;
border-radius:5px;
-moz-border-radius:5px;
border:1px s
浏览 3提问于2013-09-18得票数 1
回答已采纳
1回答
给定一个带有display .wrapper的div (在下面运行并查看代码段)和一个深度嵌套的div .text-container，我如何使深度嵌套div相对于.wrapper而不是相对于它的父.variable-height？
在下面的片段中，有两个高度相等的列，我希望文本(放在每个列内的可变高度div中)处于相同的水平。我已经将可变高度div的显示设置为flexbox，因此从逻辑上讲，文本是居中的，相对于它而不是祖父母.wrapper，这不是我想要的。
我想出的唯一解决方案是在.wrapper和.text-container上设置.wrapper
position: absolute;
浏览 1提问于2016-01-20得票数 2
回答已采纳
我有一个网页，一个固定的200 on列在一边(包含菜单)。右边是可变宽度。右侧将使用AJAX填充。对于默认页面(当没有选择菜单项时)，我试图使公司徽标水平地在页面中居中，而不是放置在其中的div。到目前为止，我尝试过的CSS都没有像预期的那样工作，当浏览器窗口水平调整大小时，徽标向左或向右移动。担心我剩下的头发掉了，我在找建议。
更多信息
这两列的CSS (来自Dreamweaver)是
.sidebar1 {
float: left;
width: 200px;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 80%;
f
浏览 0提问于2011-02-22得票数 0
回答已采纳
我有一个既包含图像又包含一些文本的容器。我想要的文本是垂直和水平居中的图像。
似乎最简单、最具前瞻性的方法是使用Flexbox和文本的绝对定位：
.container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.text {
position: absolute;
}
<div class='container'>
<div class='text'>
This should
浏览 5提问于2017-06-08得票数 9
回答已采纳
我创造了一个例子来帮助解释。
<style>
div#one {}
div#two {
height: 50px;
background-color: blue;
width: 1000px;
}
div#three {
height: 1000px;
}
</style>
...
<div id="one">Hello World!</div>
<div id="two"></div>
<div id="three"></d
浏览 2提问于2013-02-27得票数 2
回答已采纳
4回答
我有下面这段HTML页面：
<div id="main">
<div id="description">
Some text
</div>
</div>
使用以下CSS：
#main {
height:600px;
vertical-align:middle;
}
#description {
display:block;
height:50%;
width: 50%;
margin: auto;
font-size:18px
浏览 2提问于2011-10-27得票数 0
回答已采纳
我四处寻找答案，我试着把我能想到的一切都插进去，但我似乎找不出这个答案。我觉得我可能忽略了一些非常简单和明显的东西，但是你能给予的任何帮助都会很感激！
基本上，我正在尝试自定义，以便小字符框在其.wrapper div中水平居中。
尽管div本身在页面中间水平居中(为此我使用了填充:0 15% )，但中的content 却不是。
如果有人愿意的话。有关部分是第140行。提前感谢您的任何帮助！
浏览 6提问于2016-09-15得票数 0
好的，我在元素.item中有一个名为.item的类的元素，如所示。现在，我想要的是让.price水平地居中，并将其推送/拉到其父的底部边框。
现在来了有趣的部分，这使得这很困难：
纯css (没有javascript/jquery)
它需要是动态的，因此width/height属性的.price可以浮动(见片段)
以下是我的成就：
.item {
width: 200px;
height: 400px; /* not static */
background: wheat;
}
.product-image {
margin: 0 auto;
width
浏览 4提问于2016-09-16得票数 1
回答已采纳
1回答
我知道有很多关于在div中垂直和水平居中图片的帖子。那不是我的问题。我做到了。
我正在为我的摄影师朋友建立一个文件夹网站，使用(一个自定义的Wordpress主题)。你可以在这里看到:他网站的一些页面只有一张图片，这种情况下，我在 div中垂直和水平居中图片都没有问题(使用.imgcontent :表格单元格，垂直-对齐:中间和文本-对齐:居中的组合)你可以在这里看到成功的例子： (全高，水平对齐) (全宽，垂直对齐)
然而，其他一些页面在jQuery幻灯片中“包装”了几张图片。在这些页面上，我似乎无法使用div居中显示图像。它们与左上角对齐。你可以在这里看到一个例子： (在div的左上角对
浏览 2提问于2012-01-21得票数 0
2回答
我试过了，但完全失败了，定位一个界面，将超过谷歌地图布局。我试着这样做：
我的格式是这样的：
<div id="GoogleMap"> // the containing google maps layer
<!-- map will go here <div id="GoogleMapCanvas"></div> --> //eventual map
<div class="map-topmenu"></div> //my interface
浏览 0提问于2012-07-01得票数 0
回答已采纳
2回答
我正在尝试编辑tumblr主题，使我的帖子在图片中居中(图片在div中)我尝试在CSS中为帖子和div设置相同的页边距，但我似乎无法使div中的图片在页面上正确居中。我想要的帖子是完美的水平居中的图像，即使当浏览器窗口调整大小。有人知道我是怎么做到的吗？有没有比把图像放在div中更简单的方法呢？下面是我的代码的链接
浏览 2提问于2013-08-04得票数 0
有一个窄的DIV，它包含一个宽得多的DIV。如何在浏览器窗口中水平居中子DIV (而不是父DIV)，使左右边距相等？
<div id="narrow_container" style="float:left;">
<div id="wide_contents">
</div>
</div>
浏览 0提问于2011-05-05得票数 1
回答已采纳
1回答
我有一个典型的博客布局的网站-一个帖子在另一个下面。我想放置一个div，它就像一个“管道”，从顶部到底部将它们连接在一起。
图片可以帮助你理解我的想法。(很抱歉手写错误)
例如，我正在考虑在div中包装整个帖子区域，将其水平调整为较小的固定宽度和居中，但我可以在不影响内容的情况下这样做吗？我只想让那个“烟斗”的背景出现。
谢谢
浏览 3提问于2012-12-02得票数 0
回答已采纳
2回答
我把我的视频放在一个div标签里，我把它水平地居中到窗口的中央，用
.center { margin: 0 auto; width: 720px; height: 480px; }
我一直在试着让它垂直居中
.center { margin: 0 auto 0 auto; width: 720px; height: 480px; }
但它不起作用。
有什么想法吗？
浏览 4提问于2013-07-23得票数 0
2回答
我有一个徽标(775 X 225)，我想居中(垂直和水平)在一个网页，然后有一个链接“回车”，放置在它下面
<html>
<head>
<Title> My website </Title>
<style type="text/css">
//centerlogo CSS class here ?
</style>
</head>
<body lang=EN-US>
<div class'centerlogo"> <span><
浏览 0提问于2013-04-27得票数 0
回答已采纳
3回答
我想要创建一个提示框，但我的“下拉”包装中的项目。我希望他们能有足够的水平空间。
我怎样才能告诉菜单，让它的孩子在水平上需要足够的空间？
.container {
position: relative;
width: 200px;
}
.container > input {
box-sizing: border-box;
width: 100%;
}
.menu {
position: absolute;
border: 1px solid blue;
padding: 2px;
}
<div class="container"
浏览 1提问于2018-03-20得票数 2
回答已采纳
1回答
当容器位于static或relative位置时，水平居中的margin-left: auto; margin-right: auto方法效果很好，但当容器位于absolute位置时，似乎失败了。
在这种情况下，有没有办法让auto边际正常工作？出于某些原因，我需要容器为absolute。
浏览 1提问于2012-12-02得票数 0
回答已采纳
我需要创建一个可点击的div，其中包含一个在div中水平和垂直居中的图像(大小可变，但比div小)。
我将div设置为可点击
#image-box a { display: block; height: 100%; width: 100%; }
但似乎不能垂直居中图像。
浏览 1提问于2011-06-21得票数 0
回答已采纳
6回答
我有一个<div id="wrapper">容器，我的整个网站内容将在其中呈现。我尝试过使用css属性，比如margin:0 auto; on #wrapper，让div在垂直和水平方向居中。
#wrapper
{
width:500px;
height:500px;
margin:0 auto;
background:#f7f7f7;
}
通过使用上面的css，我可以使div位于屏幕的顶部，但如何使其居中(垂直)。当我在firefox中缩小时，我的div会在顶部的中心缩小，但我想要的东西应该始终显示在屏幕的中心，无论是垂直还是水平。
有人能建议我怎么才能得
浏览 0提问于2012-03-09得票数 38
回答已采纳
3回答
我试图在jQuery进度栏内垂直和水平地居中文本。我管理它的水平中心，但不是垂直。
我的HTML
<div id='progressbar'><div id='label'>My text</div></div>
我的CSS
#progressbar {
width: 80%;
text-align: center;
overflow: hidden;
position: relative;
vertical-align: middle;
}
#label {
fl
浏览 4提问于2013-08-05得票数 8
1回答
因此，我有一个位于页面中间的div (水平居中，而不是垂直居中)，它可以缩放以适应设备宽度，直到设备变得大于600px。在那之后，div仍然保持在600px宽，并且无论它变得多大，它都保持在窗口的中心。
我想要做的是定位一个背景图像，使其始终位于此缩放div的左下角(页面的背景而不是div的背景)。我相信我将需要使用javascript来做这件事，但我不是很确定。我想我可能需要这样做：
var divWidth = document.getElementById('theScalingDiv').offsetWidth;
var pageWidth = document.cli
浏览 2提问于2012-08-02得票数 0
我有一个网页，布局如下...
|----------------------|
| |----------| |
| | Logo div | |
| |----------| |
| |
| |----------| |
| | | |
| | Content | |
| | | |
| |----------| |
|----------------------|
目前，我正
浏览 0提问于2012-02-27得票数 0
回答已采纳
我构建了一个具有水平居中文本的div，该div使用了一个表和一个垂直对齐: middle。我在该div中添加了一个绝对定位的文本。
它可以在chrome上运行，但不能在firefox上运行。
你可以在这里看到代码以及它是如何工作的。
只需用chrome打开它，就会看到居中\绝对定位的文本。
然后在firefox中打开它，可以看到绝对定位的文本是根据整个屏幕而不是div内部的。
如果我移除表格，绝对定位的文本在firefox中也是可以的，但是我需要为水平文本居中找到另一个解决方案。
如何解决这个问题有什么创造性的想法吗？
10倍
浏览 0提问于2011-06-16得票数 1
回答已采纳
如何使用javascript、css和/或html在表格单元格中的图像上居中显示文本？
我有一个包含图像的HTML表-所有图像的大小都相同-并且我想在每个图像上居中放置一个文本标签。标签中的文本大小可能不同。水平居中并不难，但垂直居中却很难。
附录:我最终不得不使用javascript使用固定大小的div和绝对定位来可靠地将文本居中；我只是无法让它以任何其他方式工作。
浏览 2提问于2008-09-18得票数 1
回答已采纳
1回答
我有一个网格控件，没有完全显示在页面上，在页面的底部，我有一个水平滚动条，所以你可以看到所有的网格列。在不可见区域中的网格旁边，我有一些网格控件，这些控件必须保持固定，以防网格高度变得太大，这样用户在该页面上就可以随时访问它们。
这是我目前的大致情况：
我需要控件留在页面的最右边的部分，而不是在视口的最右边。这是可能的，还是有更好的方法来做到这一点？
编辑：
<div style="display:flex;width:700px">
<div style="height:1000px;width:1000px;backgroun
浏览 0提问于2015-10-19得票数 3
我正试图创建一个图像滑块，需要是居中水平。为了使height工作，我需要将滑块的position设置为absolute。为了使滑块居中，我尝试将左、右设置为自动，如下所示。
#slider{
position: absolute;
width:80%;
height:50%;
left:auto;
right:auto;
}
但这不管用。我包括了一个代码片段，您可以在其中看到其余的代码。
还有人能告诉我为什么height没有position:absolute;就不能工作吗？
$(document).ready(function(){
$('.active').c
浏览 5提问于2014-12-29得票数 1
回答已采纳
1回答
我有一个网页，所有的工作如预期。我已经给出了一个“控制”(基于javascript)，但是即使使用HTML和CSS，它也不能工作！因此，为了把这一点讲清楚，我把JavaScript放在了不可能的范围内。
<!-- start js control-->
<div style="position:relative;">
<div style="position:absolute;">
asdf
</div>
<div style="position:absolute;">
asdf2222
浏览 5提问于2016-05-24得票数 2
回答已采纳
正如您在下面的演示中所看到的，margin: auto;将蓝色的div水平地居中，但不是垂直的。为什么不行？
.box {
border: 1px solid red;
width: 100px;
height: 100px;
}
.center {
background: blue;
width: 50px;
height: 50px;
margin: auto;
}
<div class="box">
<div class="center"></div>
</div>
我
浏览 3提问于2015-12-31得票数 52
回答已采纳
1回答
垂直居中和水平居中旋转的div
、、、、
我试图在窗口中水平和垂直居中一个DIV。使用一点CSS和JS就可以轻松实现。但问题是我的DIV旋转了(-33度)。
所以我不知道如何正确地将它居中。我尝试使用transform-origin，并在jQuery中进行计算，但没有成功。
$('mydiv').width()给出了DIV未旋转的宽度...而不是实际的“对角”宽度...(高度相同)。
我不能手动修复它与固定的利润率，因为网站需要响应…
有可能吗？
这是我需要的结果：
非常感谢您的帮助！
摩根
(抱歉，如果我犯了一些英语错误:s)
浏览 3提问于2015-01-26得票数 0
我在努力让我的导航链接集中在我的肚脐上。我走了这么远：
@media (min-width: 768px){
.navbar-nav{
float:none;
margin: 0 auto;
display: table;
table-layout: fixed;
}
}
这很好，因为链接现在是以中心为中心。但是，它们不是以页面为中心的--它们在品牌形象使用的100 is之后居中。
有谁知道如何在页面上居中或放入100 an偏移量？
下面是演示了这个问题。
浏览 2提问于2015-01-06得票数 1
回答已采纳
3回答
我为我的生成了一个div。它是用以下代码生成的：
var alertbox = document.createElement("div");
现在我如何在水平和垂直方向上以编程方式居中该div呢？
注意:目前我正在显示一个警告框，但一旦我知道如何将div居中，我将用这个动态生成的div替换alertbox，这也将提供一些类似lightbox的效果。
谢谢
注意:作为参考，您可以下载此script 的最新版本。
请注意，我不想使用外部css，因为这是验证脚本，它应该能够做到这一点。例如:使用下面这样的内容可能会很有帮助：
alertbox.style.position: wha
浏览 0提问于2009-12-16得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
