在页面上垂直和水平居中<div>的最佳方法是什么？
在页面上垂直和水平居中 <div> 的最佳方法是使用 CSS 的 Flexbox 或 Grid 布局。
- Flexbox 布局：
将父元素的 display 属性设置为 flex，并使用 justify-content 和 align-items 属性将子元素居中。
示例代码：
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.child {
/* 其他样式 */
}<div class="parent">
<div class="child">内容</div>
</div>- Grid 布局：
将父元素的 display 属性设置为 grid，并使用 justify-items 和 align-items 属性将子元素居中。
示例代码：
.parent {
display: grid;
justify-items: center;
align-items: center;
height: 100vh;
}
.child {
/* 其他样式 */
}<div class="parent">
<div class="child">内容</div>
</div>这两种方法都可以实现在页面上垂直和水平居中 <div> 的效果，具体使用哪种方法取决于项目需求和浏览器兼容性。
相关·内容
实现此布局的最佳方法和最佳实践是什么？这意味着它将在iPad、安卓或桌面上保持一致。CSS网格？Flexbox？徽标div应垂直和水平地在页面上居中。文本div应该居中于徽标div的中间。
浏览 2提问于2018-03-04得票数 0
回答已采纳
29回答
在页面上垂直和水平居中<div>元素的最好方法是什么？
我知道margin-left: auto; margin-right: auto;会以水平方向为中心，但垂直方向的最好方法是什么？
浏览 6提问于2008-12-10得票数 588
如果我想创建一个包含明信片大小的内容的网页，我该如何在屏幕上定位它？使容器垂直居中的最佳方法是什么？Javascript？我是否应该尝试垂直居中，或者你通常更喜欢页面在靠近顶部的位置开始？
谢谢!
浏览 1提问于2009-02-25得票数 2
回答已采纳
我有一个搜索网站，需要有搜索栏和标志在索引页面的垂直和水平居中，因为它是页面上唯一的项目。
实现这一点的最佳和最有效的方法是什么？
浏览 2提问于2011-05-12得票数 2
回答已采纳
我正在努力实现以下目标:我在页面的中央有一个垂直和水平的中间div (wrapper)。在该div中，我希望有另外2个div，其中一个将包含徽标，另一个将包含一些文本。徽标图像还必须与其div的中心垂直和水平对齐。目前，我所拥有的是：下面是我的HTML和CSS的jsfiddle：
浏览 2提问于2012-10-16得票数 1
回答已采纳
这是：代码： <h1>Vertical center with only 3 lines of code</h1></p> </div>` left: 50%; translateX(-
浏览 2提问于2014-09-05得票数 6
回答已采纳
我的要求是添加图像到A4格式的PDF文件，每页一个图像。我想要居中对齐图像，这样所有的边都留有相等的空间，图像被放置在中心。
我知道我们有一个setAbsolutePosition方法，但它需要absoluteX和absoluteY。我需要一些相关的东西，比如CENTRE_HORIZONTAL和CENTRE_VERTICAL。有人可以帮助生成图像居中对齐(垂直和水平</em
浏览 1提问于2017-12-28得票数 6
回答已采纳
4回答
为什么尝试垂直或水平(或两者)对齐视口(或包装器)中心的东西会如此痛苦？
在过去的一个小时里，我尝试了所有我能找到的网站，从W3Schools到S/O，再到MSDN --我只是不知道该怎么做。必须有一种简单的方法来做到这一点。为什么DIV可以像这样水平居中，而不是垂直居中呢？为什么不能对页面上的任何其他元素使用相同的<
浏览 15提问于2011-03-14得票数 2
回答已采纳
5回答
<div id="wrapper" style="height:400px;width:400px;"> Text</div>
我正在寻找一种方法，让#example进入#wrapper的中心(左、右、上、下)。
浏览 0提问于2011-10-03得票数 1
5回答
我正在寻找居中这个文本框和提交按钮在页面上的垂直和水平，但以下代码只是把它放在顶部的中心。我怎样才能把这个居中到页面上呢？这就像是忽略了垂直对齐设置。<div style="text-align:center; vertical-align:middle">
<form action="save_though
浏览 0提问于2013-05-19得票数 9
回答已采纳
2回答
我正在设置一个图像作为一个DIV的背景，并希望居中(垂直和水平)两个选择框。我可以将窗体水平居中，但不能垂直居中。表单位于DIV的底部。这是我的CSS：{<div id="box">
<select id="Select0"
浏览 0提问于2011-07-31得票数 2
回答已采纳
我想知道这是不是可能的。我已经设置了几行jQuery来获取页面上每个特定div的高度和负的上边距，这样我就可以在屏幕上居中我的div(一个标准方法()) $('.each-web-project-info > div').each(function() {
eachWebPro
浏览 2提问于2013-07-02得票数 0
回答已采纳
我需要在页面上居中一个div，具有以下特性：
如果我调整页面的大小，则div按比例调整为页面的垂直和水平大小(如果我仅垂直调整页面的大小，则还必须水平</em
浏览 2提问于2014-06-20得票数 1
1回答
我正在使用引导来制作一个带有div的前端页面，该div是在页面中以水平和垂直方向居中的。然而，我正面临一些造型问题。在使用类时，边距-左似乎不适用。下面是HTML5标记： <div class="btn-group">
<button type="b
浏览 2提问于2014-07-03得票数 1
如果我像这样设置div的CSS页边距属性：我得到一个在页面中水平居中的div，。但是，如果我将CSS更改为：我的div不是垂直居中的。我不
浏览 1提问于2011-07-21得票数 20
回答已采纳
4回答
我正在尝试设置一个在另一个div中居中的div。这是html页面：<div id="divParent"> <div id="divHeaderText"></div>
</div&
浏览 0提问于2010-01-15得票数 1
回答已采纳
在我网站的第一页上，我只想让导航菜单在页面上垂直和水平地居中。我尝试过很多不同的方法，这是我最近的一次。&l
浏览 2提问于2013-12-01得票数 0
回答已采纳
2回答
在上努力将排行榜广告集中对齐-在某些页面上正确地定位自己，而在其他几个页面上错误地定位，似乎是这样。已经应用了<div class="center">AD CODE</div>标记，尽管这似乎并没有起到作用……
任何建议都将不胜感激，一如既往！谢谢。
浏览 1提问于2014-06-20得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
