如何在水平和垂直方向上居中一个元素，而不考虑它前后的其他元素？
要在水平和垂直方向上居中一个元素，可以使用以下方法：
- 使用CSS的flexbox布局：
- 将父容器的display属性设置为flex。
- 使用justify-content属性将元素在水平方向上居中，值为center。
- 使用align-items属性将元素在垂直方向上居中，值为center。
- 示例代码：
- 示例代码：
- 使用CSS的绝对定位和transform属性：
- 将元素的position属性设置为absolute。
- 使用top、bottom、left和right属性将元素定位到父容器的中心。
- 使用transform属性的translate属性将元素在水平和垂直方向上平移自身宽度和高度的一半。
- 示例代码：
- 示例代码：
这两种方法都可以实现元素在水平和垂直方向上的居中对齐，具体选择哪种方法取决于具体的布局需求和兼容性要求。
参考链接：
相关·内容
height: 100%; justify-content: center;}
在这里，我想使用<main>元素上flexbox使.center div水平和垂直居中。但随着<header>的存在，.center略有下降，因为<header>在<main>上占用了一些空间。如何实现绝对居中？
浏览 0提问于2017-08-16得票数 2
回答已采纳
我有一个列表，其中项目可以被添加或删除。该列表需要垂直和水平中心到它的容器。为此，我使用了以下样式：left: 50%;position: absolute;如何使列表div在水平和</e
浏览 0提问于2018-04-26得票数 0
回答已采纳
1回答
编辑:尝试改写问题，以便正确理解问题3ohryjnGyiSRrGWKn6/giphy_s.gif" autoplay="" loop="" playsinline=""></video><
浏览 0提问于2017-07-05得票数 0
请先阅读说明书，然后再提供相应的答案。谢谢!/p>显然，如果是块，.wrapper将具有img元素的高度。然后，我需要p元素在包装器内水平和垂直地居中。对于p元素，我没有固定的宽度或高度。
因此，不管段落大小，甚至图像大小，它都应该是垂直和水平对齐的，如这里所示的或这里的。如
浏览 9提问于2015-10-10得票数 7
回答已采纳
2回答
我正在使用带有jQuery的$.blockUI来显示一个模式对话框。: relative;}
这将很好地在页面的中心呈现在其他HTML的顶部。然而，如果我在.mp_modalpopup CSS类中设置了display:none，然后使用$.blockUI使其可见，在IE8中对话框垂直居中，但在页面外的对话框
浏览 0提问于2010-03-26得票数 3
回答已采纳
我有一个SWT文本，它的内容很大。由于其内容，当我最大化窗口时，textbox将垂直增长并隐藏其余控件。
浏览 2提问于2013-10-28得票数 0
我希望div在垂直和水平方向居中。但是，当我使用包装器(relative) -->container (absolute)解决办法时，底部的页脚被一直推到屏幕的顶部，然后我根本无法移动页脚。那么，如何在不使用绝对定位的情况下将棕褐色框垂直和水平居中？
浏览 0提问于2014-07-29得票数 3
2回答
从我的布局中，我注意到当我使用“位置:相对”元素时，我的"navsprite“元素不会垂直地居中；这是我的文档，这是我的文档，它基本上是一个图像精灵，我正试图水平和垂直地居中，除非我说过，它不是垂直的--如果我使用”位置:相对；“而不是”位置:绝对“元素，而不是”位
浏览 2提问于2014-10-09得票数 0
回答已采纳
3回答
我目前正在学习前端，在我正在学习的课程(?)中，我们使用transform: translate(-10px, 10px)，但是，我最近发现了一个独立的translate属性，它的工作方式和工作方式完全相同。这是否意味着我应该停止使用transform，而使用单独的属性？
浏览 1提问于2020-04-02得票数 0
回答已采纳
1回答
我试图创建一个六边形使用CSS。已经有很多关于这方面的问题了，但在我的具体情况下，我需要它由3种不同颜色的相同形状组成。六边形的整体尺寸必须由一个值来控制。在我的例子中，即.hexagon-wrapper类的宽度，六边形形状必须在父类(.hexagon-wrapper)内水平和垂直地居中，包装器还必须在其父(最外层div)中水平和垂直地
浏览 4提问于2019-10-12得票数 1
回答已采纳
我有一个既包含图像又包含一些文本的容器。我想要的文本是垂直和水平居中的图像。> </div></div>文本在两个轴上居中Safari似乎根本没有居中显示文本。它</e
浏览 5提问于2017-06-08得票数 9
回答已采纳
这是我的第一个问题。我已经收集了这个小脚本，它将元素在水平和垂直方向上同时居中，只需使用一个类。vAlign();});
我已经成功地使用"vAlign“或"hAlign”类或这两者将任何相对于任何容器(具有"position: relative ")的内容居中rlv.zcache.es/cara_d
浏览 0提问于2013-02-07得票数 1
2回答
我有一排四里的容器，每个容器里面都有H3文本。我想要的文本居中的垂直和水平，但只能得到垂直。多次尝试与垂直对齐:中间；但没有运气。我用的是这个。margin: 24px .5%; display: table-cell;}
值得一提的是不走运。
浏览 1提问于2018-12-15得票数 0
回答已采纳
1回答
希望有人能为此提供一个好的策略。
我有一个页面，我正在尝试编码，它有五个元素。问题是我希望元素在屏幕上保持它们的位置(例如，左上角，精确的中心，等等)。不管其他的有多大。例如，中间的元素可能是单行文本，并且可能突然变成300px高图像，然后可能变成100px高图像。当发生这种情况时，我不希望它下面的对象向上或向下移动。(PS:这将仅在台式计算机上
浏览 17提问于2016-08-20得票数 0
回答已采纳
我正在为布局问题而苦苦挣扎。在屏幕之外垂直增长的模式对话框，它水平和垂直居中，在顶部和底部具有最小的边距。
不在MUI的文档中吗？MUI上的“官方”方法显示了一个对话框，该对话框的内容中有一个滚动条，显示操作按钮始终在屏幕上。我不想这样。我知道这可能听起来违反了材料设计指南，但在我们的应用程序中这是有意义的。<e
浏览 3提问于2018-04-29得票数 1
如何让网格项在Tailwind中居中对齐，就像我们在Foundation中所做的那样 基础： <div class="grid-x grid-padding-x align-center-middle
浏览 39提问于2021-07-20得票数 0
回答已采纳
我正在创建一个登录页面(Python/Flask)，登录表单将是该页面上显示的唯一元素。我希望窗体在水平和垂直方向上都居中。我设法使它水平居中，但我找不到垂直对齐方式。我找到了这个有用的答案-> vertical-align with Bootstrap 3，但我的大脑就是不能理解它。我也不确定我是否正确地引用了main.css文件，并且完全不确定
浏览 8提问于2020-04-07得票数 1
回答已采纳
2回答
我有一个冰岛地图，其中包含9个不同的区域按钮。每个按钮都有不同的大小。我希望地图可以在不同的设备上显示相同的。我只知道在容器中设置水平和垂直的中心按钮。然而，其他按钮，无论我如何设置限制，在iphone或iPhone Plus上都会变得一团糟。(我照常使用iphone 8)
谁能教我如何设置8个左键的约束？谢谢!
浏览 2提问于2018-08-09得票数 0
在下面的代码中，我试图让h1元素具有上边距。当我在css中将位置设置为内联时，页边距-顶部不显示。但是当我把它改成inline-block的时候，它就发生了。我想知道有没有人能解释一下为什么会这样。编辑:这是jsfiddle中的代码：<!
浏览 3提问于2013-10-03得票数 11
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
