css实现div水平垂直居中的几种方法

最新推荐文章于 2023-09-30 13:11:25 发布
最新推荐文章于 2023-09-30 13:11:25 发布
阅读量506 收藏 3
点赞数
分类专栏： css 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18294533/article/details/103791775
版权

css实现div水平垂直居中的几种方法

一 . 给父div设置合适的padding

##父div设置padding
样式

二 . 通过position属性实现居中

1.设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

在这里插入图片描述
2.设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半; margin-top: --元素高度的一半;（适用于子元素宽高固定）
在这里插入图片描述
3.设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translate(-50%, -50%);（适用于子元素宽高不固定）
在这里插入图片描述

三 . 通过flex实现居中

在这里插入图片描述

云水禅心726
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3 flex实现div内容水平垂直居中的几种方法
11-21
一、flex-direction: （元素排列方向） ※ flex-direction:row （横向从左到右排列==左对齐） ※ flex-direction:row-reverse （与row 相反）  ※ flex-direction:column （从上往下排列==顶对齐） ...
CSS实现水平垂直居中的6种方式
热门推荐
weixin_44370837的博客
05-11 3万+
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 在开发中经常需要实现的一个页面效果是：元素的垂直居中。 在此记录一下，经常适用的几种方法 前提：元素之前的布局关系如下，需要实现class为son该元素的垂直居中 <style> .son { width: 200px; height: 200px; background-color: p
css实现垂直水平居中的六种方法
weixin_67720880的博客
04-20 5258
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。vertical-align 属性设置一个元素的垂直对齐方式。
CSS常用水平垂直居中的几种方法
qq_33721778的博客
12-28 2万+
CSS水平垂直居中一、利用margin:auto二、利用position: absolute三级目录 一、利用margin:auto 元素有宽度和高度时，利用margin:auto设置元素水平垂直居中： HTML代码如下： <div class="div1"> <div class="center"></div> </div> CSS代码如下： .div1 { background-color: #eee; width: 200px; hei
CSS中实现元素水平居中、垂直居中的6个方法（详解）
最新发布
xtcbql的博客
09-30 1万+
CSS中实现元素居中6个的方法、text-align、margin：auto、line-height、flex布局、position
css上下左右居中
11-13 237
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html,body{ width: 10...
CSS实现垂直居中的几种方法
12-13
有些方法在一些浏览器中无效，因此，到底选择哪种方法好，还要看具体情况。 方法一： 这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。 复制代码代码如下: <div ...
div+css垂直居中的五种实现方法
09-25
之前看到很多人一直都问这个问题，不过当时我没当一回事，因为在 CSS 中要垂直居中，多数是在有高度的情况下，或者容器高度不定的情况下才用，看上去比较舒服，而且实现的方法也不少。不过最近有人问了几个例子。...
CSS文本和div垂直居中方法总结
12-13
在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align: center;...因此我们需要通过别的方法去实现元素的垂直居中，下面我总结了几种了常用垂直居
div 垂直居中的多种方法详细介绍
12-13
在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？... 相关教程：div水平居中的N种方法 一、单行垂直居中 如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要
盒子居中 方法
xtyxtyxtywq的博客
09-23 560
盒子居中 方法
CSS总结div中的内容垂直居中的五种方法
qq_41425267的博客
11-03 2万+
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（padding）法 另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如： p { padding:20px 0; }
CSS实现元素水平垂直居中的各种方法
Kotlin0139的博客
07-16 1万+
在设计网页页面的过程中，总会有将元素或者文字进行水平或者垂直居中的要求，各种CSS样式调整，搞的头都大了。这里将会介绍CSS中几种常用到的水平垂直居中的方法，希望能够对你有所帮助。...
div水平垂直居中的七种方法
weixin_44330646的博客
03-02 3988
如何将div垂直水平居中？7个小妙招
最全CSS垂直水平居中的方法（十二种）
热爱前端的大三在校生
07-27 3138
最全CSS垂直水平居中的方法，告别知识短板，拒绝一知半解
css 居中问题的总结
qq_43889848的博客
05-15 2204
1.css让浮动的盒子水平居中 解决方法： 给浮动的盒子加一个父盒子，设置宽度跟浮动盒子一样大小，并且overflow:hidden; 设置该盒子为margin: 0 auto; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin:
CSS 垂直居中的七种方法——史上最详细总结
qq_37384271的博客
10-10 2万+
我们在写页面时，通常会用到水平居中或垂直居中，而水平居中很好处理，不外乎就是设定 margin: 0 auto; 或是 text-align: center; “垂直居中”却比较麻烦，下面介绍七种纯 CSS 实现垂直居中的方式。 一、设定行高（line-height） 设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素”（inline、inline-block），例如单行的标题，或是已经设为 inline-block 属性的 div，若将 line-height 设成和高度一样的数值，则内容的行内元
CSS样式实现水平、垂直居中的五种方法
qq_56202505的博客
10-27 718
CSS样式实现水平、垂直居中的五种方法， 首先在这里提前准备好两个盒子，一个设为父级盒子，一个为子级盒子，如下图。
css垂直水平居中的详细实现方式（6种）
weixin_46591819的博客
02-22 8471
css垂直水平居中方式
css的div内元素垂直水平居中
07-20
要在CSS中实现div内元素的垂直水平居中，可以使用以下方法： 1. 使用flex布局： ```css .container { ...以上是几种常见的方法，可以根据你的需求选择合适的方法来实现div内元素的垂直水平居中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值