实现块级元素垂直居中

最新推荐文章于 2022-02-11 13:54:25 发布
最新推荐文章于 2022-02-11 13:54:25 发布
阅读量360 收藏
点赞数
分类专栏： html css 文章标签： 前端
css 同时被 2 个专栏收录
8 篇文章 0 订阅
订阅专栏
html
5 篇文章 0 订阅
订阅专栏

代码如下

html：

   <body>
  <div class="content"></div>
</body>


css：

.content{
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%,-50%);
                        -o-transform: translate(-50%,-50%);
                       -ms-transform: translate(-50%,-50%);
                       transform: translate(-50%,-50%);
width: 400px;
min-height: 200px;
background-color: #ccc;

            }

实现原理：

  首先将块级元素  相对于浏览器 向上 向左偏移50%，这个时候块级元素的左上角位于浏览器的中心点位置。

利用transform中的translate属性将块级元素向左 向上平移块级元素的自身的50%；就可以实现元素本身的垂直居中

、

转载翻译于https://www.douban.com/note/486456092/



凡人在世
关注
专栏目录
【学习笔记】块级元素水平垂直居中方法
weixin_30678821的博客
04-01 542
本文以<div>元素为例 本文转载 1.已知块级元素的宽和高，使用绝对定位absolute和外边距实现水平垂直居中。 父元素position:relative，子元素position:absolute;top:50%;left:50%;margin-top:-height/2;margin-left:-width/2; （思想：先把块级元素中的左上角定位到父元素的中心，然后再向...
块级元素水平垂直居中方法
weixin_72686942的博客
08-01 3147
块级标签水平垂直居中
块级元素垂直居中问题
jianlu_blet的博客
01-21 310
1. 宽高固定（绝对定位） 样式： .box { width: 300px; height: 300px; background-color: #eee; position: relative; } .aaa { width: 100px; height: 100px; background-color: #ccc; position: absolute; top: 50
块级元素的垂直居中
cb_121的专栏
06-20 1631
块级元素的垂直居中BTN #wrapper { border:1px solid #ccc; width:400px; height:200px; text-align:center; line-height:200px;　　// Vertical Align For IE7 & Firefox _font-size:120px;　　// Verti
块级元素水平垂直居中
weixin_44494811的博客
03-18 151
方法一：绝对定位+margin 具体：父元素加 position: relative; 子元素加 position: absolute; left:0; right:0; top:0; bottom: 0; margin:auto; 方法二：绝对定位+transform 具体：父元素加 position: relative; 子元素加 position: absolute; left:50%; t...
块元素实现水平、垂直居中
lzf的博客
05-27 553
使用CSS3 Transforms实现垂直、水平居中 垂直实现原理 水平垂直居中实现代码 .parent {     width: 200px;     height: 200px;     background-color: black; } .child {     position: relative;     height: 100px;
块级元素的三种垂直水平居中的方法
12-29
直奔主题在这里提供三种块级元素垂直水平居中的方法 flex（子级宽高可固定也可不固定，随意） 定位+margin（固定子级的宽高，margin-top,margin-left取自身一半的负值） 定位+transform（不固定子级的宽高） flex...
CSS行内元素和块级元素的居中实例分析
12-13
例如，`.father`用于设置父元素的宽度，`.inlineCenter`用于设置行内元素居中，`.blockCenter`用于设置块级元素的左右自动外边距实现居中，`.relativeCenterFather`和`.relativeCenterChild`则是利用相对定位实现的...
css 块级元素垂直居中
最新发布
09-08
要将CSS的块级元素垂直居中，可以使用以下方法： 1. 使用flex布局：可以将父元素设为flex容器，然后使用justify-content和align-...以上是实现CSS块级元素垂直居中的常见方法，可以根据具体需求选择合适的方式来实现。
块级元素垂直居中
qq_46302247的博客
02-11 454
可参考：https://blog.csdn.net/zhang_yu_ling/article/details/90272623 1、 display: flex; <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .out{ width: 500px; height: 500px;
块级元素 垂直居中
dkmings的博客
06-14 902
第一种方法 ： .demo{ height:400px; position:relative;} .d{ width:200px; height:200px; position: absolute; left: 50%; top: 50%; margin-top: -100px;/* 高度的一半 */ margin-left: -100px;/* 宽度的一半 */ background
实现块级元素与行内元素的水平垂直居中
weixin_45184627的博客
07-14 185
行内元素 水平居中：text-align:center; 垂直居中：line-height:父元素的高度; 块级元素 方法一： 父元素上 position:relative; 子元素上 position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; 方法二： 父元素上 display: flex; align-items: center; /*让其子元素垂直居中*/ 子元素上 margin:0 auto; 方法三： 父元素上 pos
让一个块级元素垂直居中的八种方法
热门推荐
zhang_yu_ling的博客
05-22 3万+
怎么让一个元素垂直居中 文章目录怎么让一个元素垂直居中前言正题 前言 今天有个web前端的面试，公司挺大的，全国各地还都有分支机构，估计是因为最近缺人吧，所以我非常幸运的通过了简历筛选。但是过程有点。。。因为面试官问我的很多基础的问题我都半懂不懂的，主要还是基础没打牢，唉，感觉受到了一万点暴击，又错过了一个亿！！！ 正题 题目就是面试官问我的其中一个问题，很搞笑的是，在上个月我同桌还问过我这个问...
CSS实现块级元素水平垂直居中
Hanhanyoona的博客
03-25 937
块级元素水平垂直居中一直是常考面试体,工作中也经常会用到,在这里就汇总使用css实现块级元素水平垂直居中的方法.欢迎补充. 方法一: 父级元素position:relative, 子元素position:absolute;top:0;left:0;bottom:0;right:0;margin:auto; <!DOCTYPE html> <html lang="en"&gt...
块元素如何垂直居中
weixin_54352228的博客
07-12 89
块元素如何垂直居中 <style> .out{ width: 400px; height: 400px; border: solid 2px red; position: relative; } .inner{ width: 100px; height: 100px; bord
图片在块级元素中（宽高可变）垂直居中
polly_Mrsyang的博客
03-27 1392
当块级元素随着设备屏幕等比防缩的时候   图片垂直居中的css方法： 让iconImg垂直居中于scaleImg(自适应宽高); li> span class="coverLayer">span> img src="images/index/bottom1.jpg " class="scaleImg" alt=""/> div class="iconDiv
css块级元素实现水平垂直居中方法
sushi18257的博客
10-23 4267
总结css块级元素水平垂直居中方法 方法一：已知宽高 &lt;style&gt;   .wrapper{      width:500px;      height:500px;      border:1px solid #bbb;      position:relative;  /*给父元素设置相对定位*/   }   .demo{      width:200px;      heig...
前端居中的方法(居中，垂直居中，水平居中)
qq_36566924的博客
11-14 964
1.居中 ① 在父元素中通过设置 display：flex；align-item：center；justify-content：center ② 在父元素中设置 position：relative；width：200px；height：200px； 在子元素中设置: position: absolute; left: 0; top: 0; right: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值