css块级元素实现水平垂直居中方法

最新推荐文章于 2024-04-28 07:07:21 发布
最新推荐文章于 2024-04-28 07:07:21 发布
阅读量4.2k 收藏 4
点赞数 2
分类专栏： HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sushi18257/article/details/83309726
版权

总结css块级元素水平垂直居中方法

方法一：已知宽高

<style>
  .wrapper{
     width:500px;
     height:500px;
     border:1px solid #bbb;
     position:relative;  /*给父元素设置相对定位*/
  }
  .demo{
     width:200px;
     height:200px;
     background:#ff6700;
     position:absolute;  /*给子元素设置绝对定位*/
     top:50%;
     margin-top:-100px;
     left:50%;
     margin-left:-100px;
  }
  </style>
 </head>

 <body>
  <div class="wrapper">
     <div class="demo">text</div> 
  </div>
 </body>

方法二：文本居中 （块级元素转换行内块级元素/行内元素）

<style>
  .wrapper{
     width:500px;
     height:500px;
     border:1px solid #bbb;
     line-height:500px;
     text-align:center;

  }
  .demo{
     width:200px;
     height:200px;
     background:#ff6700;
     display:inline; /*设置成行内块级元素/行内元素*/
     
  }
  </style>
 </head>

 <body>
  <div class="wrapper">
     <div class="demo">text</div> 
  </div>
 </body>

方法三：宽高不确定

<style>
  .wrapper{
     width:500px;
     height:500px;
     border:1px solid #bbb;
     position:relative;  /*给父元素设置相对定位*/
  }
  .demo{
     width:200px;
     height:200px;
     background:#ff6700;
     position:absolute;   /*给子元素设置绝对定位*/
     top:0;
     bottom:0;
     left:0;
     right:0;
     margin:auto;
  }
  </style>
 </head>

 <body>
  <div class="wrapper">
     <div class="demo">text</div> 
  </div>
 </body>

方法四：宽高不确定

 <style>
  .wrapper{
     width:500px;
     height:500px;
     border:1px solid #bbb;
     position:relative;     /*给父元素设置相对定位*/
  }
  .demo{
     width:200px;
     height:200px;
     background:#ff6700;
     position:absolute;    /*给子元素设置绝对定位*/
     top:50%;
     left:50%;
     transform:translate(-50%,-50%)   /*css3属性*/
  }
  </style>
 </head>

 <body>
  <div class="wrapper">
     <div class="demo">text</div> 
  </div>

方法五

.wrapper{
     width:500px;
     height:500px;
     border:1px solid #bbb;
     display:flex;            /*css3盒模型*/
     justify-content: center;
     align-items:center;
  }
  .demo{
     width:200px;
     height:200px;
     background:#ff6700;
  }
  </style>
 </head>

 <body>
  <div class="wrapper">
     <div class="demo">text</div> 
  </div>

sushi18257
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS实现元素水平垂直居中的各种方法
Kotlin0139的博客
07-16 1万+
在设计网页页面的过程中，总会有将元素或者文字进行水平或者垂直居中的要求，各种CSS样式调整，搞的头都大了。这里将会介绍CSS中几种常用到的水平垂直居中的方法，希望能够对你有所帮助。...
CSS水平对齐
m0_57774967的博客
04-28 2133
关于CSS中元素的水平对齐，可以使用多种属性来进行设置 中心对齐，使用margin属性 块元素可以把左，右页边距设置为“自动”对齐 注意：在IE8中使用margin：auto属性无法正常工作，除非声明！ margin属性可以任意拆分为左，右页边距设置自动指定，结果都是出现居中元素 注意：如果宽度100%，对齐是没有效果的 html代码： css代码： 浏览器呈现效果： 说明：有两个div标签，其中一个div中加上了center类，center类中的...
CSS块级元素水平垂直居中常用的几种方式
过去属于死神，未来属于自己
12-22 1438
提示：本文总结了在工作中常用的4种块级元素水平垂直居中方法，希望对你有所帮助。
css垂直居中的6种方式
weixin_42974827的博客
09-08 1万+
这里实现了比较常用的垂直水平居中的方案，十分有用，希望对于面试必考题来说，只要熟练掌握前面三种，基本上是没有问题了，源码我会放在本人主页的资源里面，供大家免费下载，创作不易，关注一下，后续将带来vue版本大屏可视化解决方案。敬请期待吧~~~❤️。
css元素垂直居中的四个方法（包括未知元素的高度的解决方法）
最新发布
2301_82243710的博客
04-28 314
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
CSS实现: 水平居中 的几种方法
qq_53985958的博客
06-28 2万+
margin值auto、position(子绝父相)+偏移值left+margin-left、position+偏移left+CSS2d transform、text-align:center;+display:inline-block;、display:flex;justify-content:center;margin塌陷:父元素为BFC:overflow:hidden;只设置left:50%;不能实现水平居中:left:50%;与transform:translateX(-50%);中的50%意义不同
块级元素的三种垂直水平居中的方法
12-29
直奔主题在这里提供三种块级元素垂直水平居中的方法 flex（子级宽高可固定也可不固定，随意） 定位+margin（固定子级的宽高，margin-top,margin-left取自身一半的负值） 定位+transform（不固定子级的宽高） flex...
使用css实现div垂直居中的示例
09-25
总结来说，这个示例展示了两种CSS方法来实现`div`元素的垂直居中： 1. 对于包含文本的`div`，通过设置`text-align: center`和合适的`line-height`实现文本的垂直居中。 2. 对于需要整体居中的`div`，使用`position:...
CSS行内元素和块级元素的居中实例分析
09-25
2. **块级元素**：块级元素的水平居中有多种方法： - 使用`table`布局，但不推荐，因为`table`标签语义化不够好。 - 将块级元素转换为行内元素，如`display: inline`，然后使用`text-align: center`，但这会导致...
div垂直居中-CSS元素垂直居中方法的探究
06-11
另一种方法是利用CSS Grid，通过`align-items: center`和`justify-content: center`可以轻松实现元素在网格内的水平和垂直居中。 当然，现代CSS布局模式Flexbox和Grid提供了更强大的垂直居中解决方案。在Flexbox中...
css实现元素水平垂直居中——6种方式
weixin_58691935的博客
07-02 3174
实现元素水平垂直居中的方式： 利用定位+margin:auto 利用定位+margin:负值 利用定位+transform table布局 flex布局 grid布局
CSS 垂直居中的七种方法——史上最详细总结
qq_37384271的博客
10-10 2万+
我们在写页面时，通常会用到水平居中或垂直居中，而水平居中很好处理，不外乎就是设定 margin: 0 auto; 或是 text-align: center; “垂直居中”却比较麻烦，下面介绍七种纯 CSS 实现垂直居中的方式。 一、设定行高（line-height） 设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素”（inline、inline-block），例如单行的标题，或是已经设为 inline-block 属性的 div，若将 line-height 设成和高度一样的数值，则内容的行内元
css 实现块级元素水平垂直居中的方式分析
forever__fish的博客
03-12 179
【代码】css 实现块级元素水平垂直居中的方式分析。
css块级元素垂直居中五种方法
qq_37985836的博客
05-19 4190
目录前言正文第一种第二种第三种第四种第五种总结 前言 昨天收到京东的面试邀请，面试的是个小姐姐，第一道就是css问题，父元素高度不固定的情况下，如何让内部块元素垂直居中，当时只想到一种方法，因此记录下其他几种方法，以供后续翻看加深记忆 正文 第一种 在父元素添加display:flex;align-items:center 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl
CSS 元素垂直居中的 6种方法
热门推荐
wolinxuebin的专栏
05-30 45万+
转自：http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left
块级元素水平垂直居中的四种方法
菜鸟的博客
01-10 1万+
让div等块级元素水平和垂直都居中，即永远处于屏幕的中间，比如登录页面时非常有用 1.要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。   .mydiv{...
CSS中实现块级元素水平居中的N种方法
phenix323的博客
07-28 1万+
CSS中实现块级元素水平居中的N种方法： CSS中的居中可分为水平居中和垂直居中。 水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中。 下面详细介绍这几种情况。 一、水平居中 1、行内元素居中 顾名思义，行内元素居中是只针对行内元素的，比如文本（text）、图片（img）、按钮等行内元素， 可通过给父元素设置 text-align:center 来实现。 另外，如果块状元素属性display 被设置为inline时，也是可以使用这种方法。 但有个首要条件是
CSS盒子水平垂直居中方法集锦
m0_67805754的博客
04-23 9797
背景:开发中经常遇到盒子水平垂直居中的问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素,本文汇总了几种简单常用的盒子居中方法,希望可以对前端同行们有一定的帮助 初始html结构及css样式如图所示: 页面初始渲染效果: 下面给div盒子设置样式,实现居中效果 方法一:利用定位+margin:auto来实现 子盒子不设置宽高,则铺满整个父盒子(定位定在了四个角): 子盒子设置宽高和margin:auto效果 实现原理:父级设置为相对..
CSS设置行内元素和块级元素的水平居中、垂直居中
zuo_er_lyf的博客
02-15 2886
什么叫行内元素（内联元素）？ 常见的span、a、lable、strong、b等html标签都是行内元素 默认情况下，行内元素均无法设置宽度、高度、上下方向margin的外边距等 一般在css中添加属性： display:inline //这时设置成了内联元素   什么叫块级元素？ 常见的div、p、li、h1、h2、h3、h4等html标签都是块级元素 一般在css中添加属性：...
块级元素水平垂直居中的方法flex
09-03
在CSS中，要使块级元素水平垂直居中最简单的方法是使用弹性布局（flex）。 首先，我们需要将包含块级元素的父元素设置为弹性容器，可以使用以下代码来实现： .container { display: flex; justify-content: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值