css中如何使div居中显示

在CSS中，有多种方法可以使div元素居中显示。以下是几种常见的方法：

1. 水平居中

方法一：使用`margin`属性

.center-div {
  margin: 0 auto;
  width: 50%; /* 设置宽度 */
}

方法二：使用`flexbox`

.parent-div {
  display: flex;
  justify-content: center;
}

.center-div {
  width: 50%; /* 设置宽度 */
}

方法三：使用`grid`

.parent-div {
  display: grid;
  place-items: center;
}

.center-div {
  width: 50%; /* 设置宽度 */
}

2. 垂直居中

方法一：使用`flexbox`

.parent-div {
  display: flex;
  align-items: center;
  height: 100vh; /* 设置高度 */
}

.center-div {
  width: 50%; /* 设置宽度 */
}

方法二：使用`grid`

.parent-div {
  display: grid;
  place-items: center;
  height: 100vh; /* 设置高度 */
}

.center-div {
  width: 50%; /* 设置宽度 */
}

方法三：使用`position`属性

.parent-div {
  position: relative;
  height: 100vh; /* 设置高度 */
}

.center-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%; /* 设置宽度 */
}

3. 水平和垂直居中

方法一：使用`flexbox`

.parent-div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 设置高度 */
}

.center-div {
  width: 50%; /* 设置宽度 */
}

方法二：使用`grid`

.parent-div {
  display: grid;
  place-items: center;
  height: 100vh; /* 设置高度 */
}

.center-div {
  width: 50%; /* 设置宽度 */
}

方法三：使用`position`属性

.parent-div {
  position: relative;
  height: 100vh; /* 设置高度 */
}

.center-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%; /* 设置宽度 */
}

应用场景

这些方法适用于各种需要将div元素居中显示的场景，例如：

页面布局中的中心内容区域
弹窗或模态框的居中显示
图片或视频的居中展示

参考链接

通过这些方法，你可以根据具体的需求选择最适合的方式来使div元素居中显示。

页面内容是否对你有帮助？

有帮助

没帮助

使用CSS进行水平对齐

我有以下代码： <p>Test<p><span style="color: Green">▼</span>这是一个非常简单的问题，我想，但我不知道CSS。如何使段落显示为水平居中对齐？

浏览 8提问于2011-06-11得票数 3

回答已采纳

2回答

使文本或图像在导航栏中居中

、、

我希望能够在导航栏中居中显示一些文本或图像，这就是我正在做的事情。 <<e

浏览 1提问于2014-12-13得票数 1

2回答

教我如何使用CSS居中显示图像

、

我已经搜索了这个问题，但没有找到任何有用的东西...在之前的一篇文章中，有人建议我不要使用center。我查了一下，现在明白为什么使用它是不利的……所以..。我尝试了整个CSS方面的生活，但什么都不起作用。我正在使用HTML Kit-Tools，所以不确定这是不是程序问题，很可能是我无用的智力……<html><title>Access All Areas - Live&

浏览 5提问于2015-03-11得票数 0

0回答

用于省道的Css角2材料组件。如何使字形居中？

、、、、

HTML： <glyph class="center" [icon]="'star'" ></glyph> </div>.centerText{ text-align: center;

浏览 2提问于2016-12-31得票数 0

回答已采纳

2回答

居中DIV，但使用其他不允许它的CSS

、、、、

我想在<body>中居中放置一个div，但我就是想不出怎么做。我尝试过flexboxes和margin: 0 auto;的老把戏。/css/ham.css" rel="stylesheet"> <link rel="stylesheet" href="../css/main.css" type="text/<e

浏览 2提问于2017-08-20得票数 0

1回答

冲突fadeslideshow.js和Jquery将DIV显示在中心

、

我正在使用脚本(如下所示)将DIV居中，它工作得很好。="javascript"> jQuery.fn.center = function () { return this; $("#loading").center(); </script> refer链接加载目录<e

浏览 0提问于2013-07-02得票数 0

回答已采纳

1回答

父引导行中的居中div

、、

在下面的示例中，我试图用一个.centered类将包含数字的div居中，但它没有居中。我如何使它们居中，使它们坐在行的中间而不是左边？CSS： margin: 0 auto;DIVs： <div id="83" class="square centerd&qu

浏览 3提问于2018-03-07得票数 2

2回答

使用Foundation将按钮居中

、、

我正在尝试使用foundation将按钮居中，以下是我的代码： <div class="small-6 small-centered columns"><a href="#" class="button">Default Button</a></div> 看完

浏览 2提问于2014-09-12得票数 0

1回答

如何使用jQuery更改div的位置？

、

我想用jQuery在我的网站上重新定位一个div。基本上我有一个带很多槽的工具栏。我使用来自jQueryUI的Draggable+Droppable项来处理移动和拖放。

浏览 1提问于2011-01-05得票数 1

回答已采纳

1回答

如何在CSS中将文本定位在图标之后？

、

我有以下代码：<code>A0</code> 更改内容，使文本显示在图像下方，宽度不同于图像，而是稍宽一些

浏览 24提问于2018-12-17得票数 1

2回答

垂直居中div中的两个元素

、、

我尝试将两个<p>元素垂直居中。我会尝试其他方法，但这里的大多数问题都指向那个教程。relative; position: absolute; height: 52px;} <div class

浏览 0提问于2012-08-16得票数 16

回答已采纳

3回答

使整个页面居中

有没有CSS可以用来做这件事？

浏览 0提问于2012-09-10得票数 4

回答已采纳

2回答

CSS菜单居中定位

、

我正在学习html/css。我想问一个愚蠢的问题。

浏览 5提问于2012-03-24得票数 0

1回答

显示:表格单元格；在ie6/7中解决办法

、、、

我正在尝试构建一个包含多个单元格的单行css表，这些单元格的文本在单元格中垂直居中。基本上，我试图用css模仿的表行为是这样的： <tr> <td width=&qu

浏览 0提问于2010-09-17得票数 0

21回答

居中位置:固定图元

、、

我想使一个position: fixed;弹出框居中的屏幕与动态的宽度和高度。为此，我使用了margin: 5% auto;。如果没有position: fixed;，它可以水平居中，但不能垂直居中。添加position: fixed;后，它甚至不会水平居中。margin: 5% auto; border: 5px solid #ccc;} <div</d

浏览 5提问于2010-01-05得票数 513

回答已采纳

2回答

CSS绝对div居中

、、、

如何使绝对div居中？<div class="photoWindow">min width 600 px, absolute</div>var widthScreen = $(window).width();$('.photoWindow').css({'margin-left': widthScreen / 2 - widthScreen,

浏览 0提问于2011-03-08得票数 1

回答已采纳

3回答

如何使div在居中的div中向左/向右浮动

、、

当我想在居中的父div中向左或向右浮动子div时，整个设计会向左或向右移动，具体取决于浮动。那么，如何浮动子div，并使居中的父div居中。HTML：<div id="child-left"></div> <div i

浏览 3提问于2012-10-10得票数 4

回答已采纳

2回答

如何在Slick Carousel中将项目居中？

、、

当我的项目少于转盘一次可以显示的项目时，它们是左对齐的。我想让它们居中。

浏览 2提问于2015-10-14得票数 5

回答已采纳

1回答

将中心菜单与其内容对齐

、、、、

我试着用方框大小在菜单的div中水平居中显示文本。以下是中的代码。<div id="menu"> <table> <td>Nosotros</td> <&

浏览 2提问于2013-11-27得票数 0

2回答

居中的图像，文本在其右侧

、

图像应该在页面居中，并且它的右侧应该有一个文本，如下所示： ? 我当前用来显示居中图像的CSS代码如下： .inlineimage {width:100%;margin:auto; <picture> media="(max-widt

浏览 23提问于2020-01-31得票数 0

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

css中如何使div居中显示

1. 水平居中

方法一：使用margin属性

方法二：使用flexbox

方法三：使用grid

2. 垂直居中

方法一：使用flexbox

方法二：使用grid

方法三：使用position属性

3. 水平和垂直居中

方法一：使用flexbox

方法二：使用grid

方法三：使用position属性

应用场景

参考链接

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

方法一：使用`margin`属性

方法二：使用`flexbox`

方法三：使用`grid`

方法一：使用`flexbox`

方法二：使用`grid`

方法三：使用`position`属性

方法一：使用`flexbox`

方法二：使用`grid`

方法三：使用`position`属性