开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

DIV垂直居中和水平居中，带有边框、填充和边距

基础概念

在网页布局中，垂直居中和水平居中是将元素精确放置在容器中的常见需求。这通常涉及到CSS（层叠样式表）的使用，特别是Flexbox和Grid布局。

相关优势

提高用户体验：居中的内容更容易吸引用户的注意力，并且在视觉上更加平衡。
响应式设计：使用Flexbox或Grid可以轻松实现响应式布局，适应不同屏幕尺寸。
简化代码：现代CSS布局方法比传统的浮动或定位方法更简洁，易于维护。

类型与应用场景

水平居中

文本居中：使用text-align: center;
块级元素居中：使用margin: 0 auto;
Flexbox居中：使用justify-content: center;
Grid居中：使用justify-items: center;

垂直居中

Flexbox居中：使用align-items: center;
Grid居中：使用align-items: center;
绝对定位居中：结合top: 50%; left: 50%; transform: translate(-50%, -50%);

示例代码

以下是一个使用Flexbox实现带有边框、填充和边距的DIV垂直居中和水平居中的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered DIV Example</title>
<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 使容器占满整个视口高度 */
    border: 2px solid #333;
    padding: 20px;
    margin: 20px;
  }
  .centered-div {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 20px;
    text-align: center;
  }
</style>
</head>
<body>
<div class="container">
  <div class="centered-div">
    Centered Content
  </div>
</div>
</body>
</html>

常见问题及解决方法

问题1：元素未能完全居中

原因：可能是由于父容器的高度没有正确设置，或者子元素的尺寸和位置计算不准确。

解决方法：

确保父容器有明确的高度设置，如height: 100vh;。
使用transform属性进行微调，如transform: translate(-50%, -50%);。

问题2：边框和填充影响了居中效果

原因：边框和填充会增加元素的实际尺寸，可能导致居中计算出现偏差。

解决方法：

使用box-sizing: border-box;来确保元素的宽度和高度包括边框和填充。
在计算居中位置时考虑边框和填充的影响。

通过上述方法和示例代码，可以有效地实现DIV的垂直居中和水平居中，同时处理边框、填充和边距的问题。

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

有帮助

没帮助

相关·内容

大型编程电视剧连载 | CSS知识点硬核整理归纳（二）

盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。...属性作用 margin-left 左外边距 margin-right 右外边距 margin-top 上外边距 margin-bottom 下外边距 5.4.1、块级盒子水平居中可以让一个块级盒子实现水平居中必须...} 5.4.2、文字居中和盒子居中区别盒子内的文字水平居中是 text-align: center, 而且还可以让行内元素和行内块居中对齐块级盒子水平居中左右margin 改为 auto text-align...5.4.5.2、嵌套块元素垂直外边距的合并对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。 ?...下面举例我们生活中很常见的一个样式：div 水平排列。

1.8K2 0

前端学习笔记之CSS属性设置 CSS属性设置

设置标签的背景图片 background-image: url("images/2.jpg"); background-image: url("图片网址"); 注意：如果图片的大小没有标签的大小大，那么会自动在水平和锤子方向平铺和填充...class="JetPropellSnake"> div class="alex">div> div> 5、盒子居中与内容居中内容居中 1、让一行内容在盒子中水平且垂直居中.../*水平居中*/ text-align: center; /*垂直居中*/ line-height: 500px; 2、让多行内容在盒子中垂直居中（水平居中与单行内容一样）让行高与盒子高度一样，...只能让一行内容垂直居中，如果想让多行内容垂直居中，比如下面这种，想让div中的多行内容垂直居中，一看div中的文字是两行，每一行的行高为20，加起来就是40，80-40=40，需要让文字距离顶部pading...我 div> 7、清除默认边距 #1、为什么要清空默认边距（外边距和内边距）浏览器会自动附加边距，在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等编写代码之前的第一件事情就是清空默认的边距

5.9K3 0

Css代码

left:居左，居中:center，也可以用1%-1008%表示与左端距离大小*/⑤bottom /*背景图垂直位置位于底部。...top:居顶部，center:居中，也可用1%-100%表示与顶端距离大小*/⑥#002255/*背景颜色*/⑦cover /*背景图尺寸。...[属性] {通用代码} /*用于选取带有指定属性的元素。*/[属性=值] {通用代码} /*用于选取带有指定属性和值的元素。*/[属性~=值] {通用代码} /*用于选取属性值中包含指定词汇的元素。...margin: 1px 2px 1px 2px; /*扩展名外边距，分别为上右下左*/ text-shadow: 0px 0px 3px gray; /*扩展名文字阴影，分别为水平阴影、垂直阴影、阴影距离...、垂直阴影、阴影距离、阴影颜色*/ } 网页边框内定义 div { color: red; /*默认字颜色为红*/ border-style: double; /*边框样式*/ border-color

2K2 0

【CSS】课程网站 Banner 制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 )

height: 420px; /* 背景颜色 #1c036c , 背景图片水平居中对齐 */ background: #1c036c url(images/banner_bg.png) no-repeat...20px; /* 行高 = 内容高度垂直居中 */ line-height: 40px; /* 字体大小 */ font-size: 18px; /* 字体颜色 */ color: #050505.../ color: #666666; } /* 用户栏头像样式 */ .user .user-img { float: left; /* 用户头像 30 像素容器高 42 上下各 6 像素边距...图像垂直居中 */ padding: 6px 0; } /* 用户栏名字样式 */ .user .user-name { float: left; /* 名字与头像间隔 6 像素 */ margin-left...: 6px; } /* Banner 条样式 */ .banner { /* 宽度自动填充整个浏览器, 这里只设置高度 */ height: 420px; /* 背景颜色 #1c036c , 背景图片水平居中对齐

3.9K2 0

前端入门学习--CSS

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。...要知道，完全大小的元素，还必须添加填充，边框和边距 div { width: 300px; border: 25px solid green; padding: 25px;...使用 clear 属性往文本中添加图片廊： .text_line { clear:both; } CSS 布局 - 水平 & 垂直对齐元素居中对齐要水平居中对齐一个元素(如 div), 可以使用...移除浏览器的默认设置将边距和填充设置为0 垂直导航栏 ul { list-style-type: none; margin: 0; padding: 0;...使用CSS来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。

27.7K2 0

让div等块级元素水平以及垂直居中的解决办法

一、背景　　我们在设计页面的时候，经常要把div等块级元素居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让div等块级元素居中。...在本文中，我将给大家讲述如何用CSS和jQuery两种方法让div等块级元素水平和垂直居中。...只要设置了div等块级元素的宽度，然后使用margin设置边距0 auto，CSS自动算出左右边距，使得div等块级元素居中。　...实现一、原理：要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%...　原理：jQuery实现水平和垂直居中的原理就是通过jQuery设置div等块级元素的CSS，获取div等块级元素的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该div等块级元素的宽度

1.8K2 0

【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

| 代码示例 ) 【CSS】绝对定位元素设置水平 / 垂直居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 ) 【CSS】使用 z-index 属性值控制定位盒子的堆叠顺序.../ 垂直居中绝对定位不能通过设置 margin: auto; 样式的方式 , 设置盒子模型水平居中 ; 相对定位的盒子模型 , 并没有脱离标准流限制 , 仍然可以使通过设置 margin...的容器需要居中对齐 ; 1、设置固定尺寸使绝对定位元素水平 / 垂直居中最简单的方法就是使用标尺测量父容器的宽高 , 通过设置四个边的边偏移量 , 设置元素水平 / 垂直居中 ; 2..., 没有塌陷 ; 示例 2 中 , 为子盒子设置了上外边距 , 结果将父盒子也带下来了 ; 使用传统方法解决外边距塌陷问题 : 为父容器 / 子元素设置内边距 / 边框 ; 下面是...| 水平垂直进度条效果 ) 博客 ;

3601 0

HTML标记语法之图片Img元素

alt 文本图片无法显示时的文本 title 文本鼠标停留时显示的内容 width 像素/百分比设置图片宽度 height 像素/百分比设置图片高度 border 数字设置图像边框...align left 图片靠左，文字靠右 right 图片靠右，文字靠左 top 文字垂直居上靠 bottom 文字垂直居下 middle 文字垂直居中 vspace...像素定义图像顶部和底部的空白（垂直边距） hspace 像素定义图像左侧和右侧的空白（水平边距）

1.8K1 0

前端课程——盒子模型

相关概念内容区（content）用于显示文本和图像内边距（padding）内容区至边框的边距边框（border）内容区的边界外边距（margin）两个元素的边距之间的距离...这个关键词可以被设置在属性的任何一个位置(前面、后面或者两个值之间) border-image-repeat 定义图片如何填充边框。...或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。 border-image-outset 定义边框图像可超出边框盒的大小。...盒子模型的类型块级元素可以设置宽高内联元素水平方向的内边距有效的 - 控制文本内容在水平方向的位置垂直方向的内边距有效的 - 文本内容的位置没有变化，内边距向上和向下进行扩展垂直方向的外边距无效的...- 上外边距和下外边距水平方向的外边距有效的行内块级元素与块级元素相同盒子模型的类型 box- sizing属性用于设置盒子模型的类型，该属性的值具有两个: ●content-box:

1.1K1 0

在 flex 布局中通过使用 margin 实现水平垂直居中以及其他常见的前端布局

在前端开发中，实现水平垂直居中一直是个热门话题。...如上图所示，元素在水平和垂直方向都居中了。...: flex-end; } 如上图所示，justify-content: flex-start; 使元素在水平方向居左；align-items: flex-end; 使元素在垂直方向靠底。...它不仅可以处理水平居中，还可以在 Flexbox 布局下根据剩余空间自动调整外边距，实现完全的居中对齐。...这样就使第二个元素的左侧和第四个元素的右侧将会自适应边距间隔。因此，我们可以使用 margin 巧妙地通过调整子元素的外边距，实现元素的部分集中和对齐布局。

1691 0

【CSS】课程网站 Banner 制作 ③ ( Banner 栏右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程栏代码示例 )

228x48 像素 */ height: 48px; /* 盒子背景颜色 */ background-color: #9bceea; /* 字体大小 */ font-size: 18px; /* 水平居中...1 像素实线 , 垂直居中 , 水平居中 ; 样式如下 : /* Banner 条右侧课程表底部按钮样式 */ .all { /* 显示模式 - 块级元素 */ display: block...228x48 像素 */ height: 48px; /* 盒子背景颜色 */ background-color: #9bceea; /* 字体大小 */ font-size: 18px; /* 水平居中.../ color: #666666; } /* 用户栏头像样式 */ .user .user-img { float: left; /* 用户头像 30 像素容器高 42 上下各 6 像素边距...: 6px; } /* Banner 条样式 */ .banner { /* 宽度自动填充整个浏览器, 这里只设置高度 */ height: 420px; /* 背景颜色 #1c036c , 背景图片水平居中对齐

3.6K6 0

【CSS】课程网站网格商品展示模块制作 ① ( 网格商品展示模块盒子模型测量及样式 | 顶部文本标题盒子测量及样式 | 代码示例 )

; } 3、左侧文本盒子尺寸测量和样式标题盒子判定 , 上面的标题 , 可以将其设置为垂直居中的样式 , 垂直居中 , 需要行高 = 内容高度 , 这里精确的测量 " 精品推荐 " 文本的行高与内容高度...; 该文本盒子如下图所示 , 文本内容 20 像素 , 文本上面和下面各有 20 像素的空白 ; 行高直接设置为 60 像素 , 文本内容页设置成 60 像素 ; /* 文本部分设置垂直居中 */.../ color: #666666; } /* 用户栏头像样式 */ .user .user-img { float: left; /* 用户头像 30 像素容器高 42 上下各 6 像素边距...: 6px; } /* Banner 条样式 */ .banner { /* 宽度自动填充整个浏览器, 这里只设置高度 */ height: 420px; /* 背景颜色 #1c036c , 背景图片水平居中对齐...距离上面的导航栏 15 像素 */ .box { margin-top: 15px; } /* 文本部分设置垂直居中 */ .box-hd { /* 内容高度 = 行高, 垂直居中 */

4.3K4 0

从头学前端-CSS基础03

1.盒子模型盒子模型组成：> 盒子模型组成的主要有边框border，外边距margin ，内边距padding，内容content；- 边框border:> border可以设置元素的边距，边距有三部分...:collapse可以合并表格的相邻边框> 边框会影响盒子的实际大小；增加盒子大小，盒子的总大小为宽度或高度加上两个边框的大小；- 内边距> padding用于设置内边距，即盒子边框和内容的距离.默认是...，即盒子与盒子之间的距离> 语法 margin: top right bottom left 上右下左> 外边距可以让设置了width的块级元素水平居中: > {margin: 0 auto} > 行内元素或行内快级元素水平居中...，给父元素添加属性text-align: center --- > 嵌套关系的块级元素垂直外边距的塌陷问题；在父元素和子元素同时具有margin-top属性时，以最大值为准；解决方式有：给父元素 >...设置边框 border {1px } > 设置内边距 > 添加overflow: hidden> 浮动的盒子不会有这个塌陷问题 --- > 清除内外边距：不同的网页元素带有不同的内外边距，不同浏览器也不一样

6802 0

【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )

3、显示效果绘制矩形框中的部分 : 一、盒子测量及样式 ---- 盒子样式如下 : 1、总体盒子测量及样式该盒子是处于版心位置 , 先为其设置版心的样式 , 版心宽度 1200 像素 , 水平居中...会自动垂直居中 , 文本大小为 16 像素 , 颜色为 #050505 ; 最终样式为 : /* 设置竖线和课程名称所在盒子的文本颜色这是所有的文本样式课程在链接里面由 a.../ color: #666666; } /* 用户栏头像样式 */ .user .user-img { float: left; /* 用户头像 30 像素容器高 42 上下各 6 像素边距...: 6px; } /* Banner 条样式 */ .banner { /* 宽度自动填充整个浏览器, 这里只设置高度 */ height: 420px; /* 背景颜色 #1c036c , 背景图片水平居中对齐...228x48 像素 */ height: 48px; /* 盒子背景颜色 */ background-color: #9bceea; /* 字体大小 */ font-size: 18px; /* 水平居中

5.2K3 0

CSS重要的盒子模型

，发生了2件事情：内容和边框有了距离，添加了内边距。...块级盒子水平居中可以让一个块级盒子实现水平居中必须：盒子必须指定了宽度（width）然后就给左右的外边距都设置为auto，实际工作中常用这种方式进行网页布局，示例代码如下： .header{...margin-left: auto; margin-right: auto; margin: auto; margin: 0 auto; 文字居中和盒子居中区别盒子内的文字水平居中是 text-align...: center, 而且还可以让行内元素和行内块居中对齐块级盒子水平居中左右margin 改为 auto text-align: center; /* 文字行内元素行内块元素水平居中 *.../ margin: 10px auto; /* 块级盒子水平居中左右margin 改为 auto 就阔以了上下margin都可以 */ 插入图片和背景图片区别插入图片我们用的最多比如产品展示类

1K2 0

CSS布局(二) 盒子模型属性

详细来说，元素宽度=包含块宽度—元素水平外边距-元素水平边距宽度-元素水平内边距；　　高度设置为auto，则会尽可能的窄。...【为什么margin:auto无法实现垂直居中】水平方向可以居中是因为块级元素的宽度默认是撑满父级元素的，如果给宽度设置一个固定值，而左右margin设置为auto，则可以平分剩余空间垂直方向不可以居中是因为块级元素的高度默认是内容高度...，与父级元素的高度并没有直接的关系，而上下margin设置为auto，则被重置为0 margin: 0 auto; 【为什么图片使用margin:auto不能水平居中】图片无法水平居中，类似于块级元素无法垂直居中...左右margin设置为auto，会被重置为0 所以，图片要水平居中，需要设置为display:block元素 3.无效情形 1、行内元素垂直margin无效因为行内元素垂直布局主要是通过行高...边框border 　　元素外边距内就是元素的边框border，边框由粗细、样式和颜色三部分组成，且先后顺序无关基础样式 border: border-width border-color border-style

1.9K7 0

CSS盒子模型

盒子本身没有写 width或者height属性时，不会撑开盒子外边距：用于控制盒子与盒子之间的距离 margin-left / right / top / bottom 分别定义四边的外边距和padding...语法基本相同块级盒子水平居中保证左右的外边距为"auto" 盒子必须指定宽度常用写法：margin: 0 auto; 行内元素或者行内块元素水平居中给其父元素添加 text-align:center...;即可外边距合并：在使用margin定义块元素的垂直外边距时，可能会出现外边距合并嵌套块元素塌陷解决方法：可以为父元素定义上边框为父元素定义上内边距为父元素添加overflow：hidden;...清除内外边距：网页元素很多都会带有默认的内外边距，而不同浏览器的默认值不一致，所以我们在布局前，首先要清楚内外边距 *{ margin:0; padding:0; } 注意：行内元素尽量只设置左右内外边距...和盒子阴影写法一样

7453 0

前端成神之路-盒子模型

值之后，发生了2件事情：内容和边框有了距离，添加了内边距。...5.3 块级盒子水平居中可以让一个块级盒子实现水平居中必须：盒子必须指定了宽度（width）然后就给左右的外边距都设置为auto，实际工作中常用这种方式进行网页布局，示例代码如下： .header...margin-left: auto; margin-right: auto; margin: auto; margin: 0 auto; 5.4 文字居中和盒子居中区别盒子内的文字水平居中是 text-align...: center, 而且还可以让行内元素和行内块居中对齐块级盒子水平居中左右margin 改为 auto text-align: center; /* 文字行内元素行内块元素水平居中 */...margin: 10px auto; /* 块级盒子水平居中左右margin 改为 auto 就阔以了上下margin都可以 */ 5.5 插入图片和背景图片区别插入图片我们用的最多比如产品展示类

9913 0

前端(二)-CSS

常用图片与文字垂直对其；值说明 middle 垂直居中 top 顶部 bottom 底部边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。...border-spacing:h-length v-length; h-length即单元格之间的水平距离； v-length即单元格之间的垂直距离。...4.3 内外边框 4.3.1 margin 外边距 margin-top margin-right margin-bottom margin-left 4.3.2 外边距妙用外边距妙用，网页居中对齐...：margin:0px auto; 网页居中对齐条件：1.块元素 2.固定宽度 4.3.3 padding 内边距 padding-left padding-right padding-top

1.9K2 0

前端系列第3集-如何理解css盒子型?

如果想要清除默认的外边距和内边距，可以将这些属性的值设置为0，示例代码如下： .box { margin: 0; padding: 0; } 如何垂直居中一个盒子？...可以使用CSS的margin属性来实现盒子在其容器中水平居中。将盒子的左右外边距设置为auto，就可以使盒子在容器中水平居中。...可以使用CSS的绝对定位和负边距的方式来实现一个盒子在页面中居中。...} .right { width: 200px; float: right; } .middle { margin: 0 200px; /* 左右两栏的宽度 */ } 如何让一个盒子水平垂直居中...可以使用CSS的绝对定位和transform属性来实现一个盒子水平垂直居中。

2541 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭