利用Position让内容垂直居中

最新推荐文章于 2022-08-05 14:53:46 发布
最新推荐文章于 2022-08-05 14:53:46 发布
阅读量719 收藏 1
点赞数 1
分类专栏： HTML/CSS 文章标签： CSS 居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kkm486622296/article/details/79168593
版权 
<style type="text/css">
    *{
        margin: 0;padding: 0;
    }
    #box{
        height: 200px;width: 200px;background: #ff0000;position: absolute;
        left: 50%;top: 50%;margin-left: -100px;margin-top: -100px;
    /* 绝对定位 先用百分比相对页面居中 再减去1/2 Div宽高  保证div在可视区域垂直水平居中 */
}
</style>
<body>
    <div id="box"></div>
</body>
晨兮神
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习-position定位、浮动的影响和垂直水平居中
weixin_51346866的博客
03-01 442
先记那么多先，position后面二个属性可以再补充一下。
利用css设置元素垂直居中的解决方法汇总
09-24
【CSS元素垂直居中方法详解】 在Web页面设计中，元素的水平垂直居中布局是一项常见的挑战，尤其是垂直居中，往往需要灵活运用各种CSS技巧。以下是一些实用的CSS方法，帮助你解决元素垂直居中的问题。 1. **行内...
position属性及实现图片垂直居中
weixin_34227447的博客
07-29 115
转自： http://blog.onlygrape.com/position/186 定义position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 span>position版本：CSS2　 兼容性：IE4+ NS4+　继承性：无br> 语法：position : static | absolute | fixed | relative 参数：st...
position怎么使元素居中
peng687095的博客
03-11 3380
不bb，直接上代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;Document&lt;/title&gt;    &lt;script src='c.js'&gt;&lt;/script&
position居中
唔厌组的秋秋空间
03-27 399
width:80%;height:auto;position:fixed; top:50%; left:50%; transform:translateX(-50%) translateY(-50%);padding:10px 5px;
position实现块级元素垂直居中
brain_bo的博客
07-27 1632
块级元素垂直居中（position方法）， css部分： *{padding: 0;margin: 0;} body,html,.wrap{width: 100%;height: 100%;} .wrap{background: red;position: relative;} .box{position: absolute;top: 50%;left: 50%;transform: tran...
使用css实现div垂直居中的示例
09-25
在网页设计中，让元素居中是常见的需求，特别是对于`div`这样的块级元素，垂直居中有时会显得较为复杂。本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先，我们要理解CSS布局的基本概念。在网页中，...
css实现的让图片垂直居中的方法
09-25
在网页设计中，让图片垂直居中是一项常见的需求，特别是在图片尺寸不固定，而外部容器有固定尺寸的情况下。本文将介绍三种使用CSS实现图片垂直居中的方法。 **方法一**： 这种方法利用了`display:table`和`display:...
css让容器水平垂直居中的7种方式
09-27
在CSS布局中，让容器水平垂直居中是常见的需求，特别是在设计响应式网站或移动应用时。以下将详细介绍七种实现这一目标的方法。 1. **Position + Margin** 这种方法利用绝对定位和负margin来实现居中。首先，外层...
CSS设置多行文本垂直居中的方法
12-13
这种方法利用绝对定位和`transform`的`translateY`来实现垂直居中。请注意，这种方法并不依赖于`display: table-cell`，因此没有固定高度的限制。 另外，当`display: table-cell`导致`overflow`属性不起作用时，...
position实现居中
lele的博客
10-16 396
*{ padding:0; margin:0; } .f{ width:500px; height:500px; background:red; positi
position的4种定位以及居中的2种方法。
热门推荐
tjh1998的博客
02-26 2万+
参考文章：https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 1.z-index设置元素在垂直于显示屏（z轴方向上）的堆叠顺序，值大的元素发生重叠时会盖在值小的上面。 2.正常流（常规流）不会受到top，right,left,bottom的影响。 例如： &amp;amp;lt;!doctype html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot
使用定位position实现元素居中
里昂的博客
10-24 4327
在使用绝对定位时要想实现水平居中，可以按照下图的方法： left: 50%;：让盒子的左侧移动到父级元素的水平中心位置； margin-left: -100px;：让盒子向左移动自身宽度的一半。 垂直居中同上 ...
简单总结position定位和元素水平垂直居中
qq_37012533的博客
12-11 7668
position position的属性值共有四个常用的：relative、absolute、fixed、static。 首先普及一下文档流的知识：显示元素对象在窗口排列时所占用的位置，自上而下，从左到右。脱离文档流会影响其他元素的位置。 relative：相对定位，不脱离文档流，在文档流原先的位置进行位移。 absolute:绝对定位，脱离文档流，相对于最近的且不为static的父元素进行定位，...
08-CSS中的position定位&盒子水平垂直居中
CapejasmineY的博客
08-05 1416
position定位属性、层级z-index、行内元素转换块元素方法、盒子水平垂直居中
用 position 实现上下左右居中
bubbleSweet的博客
05-11 2168
用 position 实现上下左右居中 <div class="father"> <div class = "child1"></div> </div> .father { border: 10px solid black; overflow: hidden; height: 500px; }
css使用position定位如何让元素居中
qq_34661750的博客
02-09 1万+
使用position生成绝对定位的元素 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 如何让元素居中 方法一 针对已知宽高，可使用margin .box{ width:600px; h
position定位属性 以及 元素居中方式
m0_51328823的博客
01-07 2643
定位属性position 在css中比较重要的便是position和float。 定位是将盒子定在某一个位置自由的漂浮在其他盒子的上面 定位的语法 定位=定位模式+边偏移(left right top bottom) 定位的属性值 1.静态定位 position: static; 相当于没有定位 设置边偏移无效 2.相对定位 position: relative; 1.相对于 自己原来在标准流中位置来移动的 2.不脱标(继续占有原来的位置，后面的盒子仍然以标准流的方式对待它) 3.绝对定
html css+div 万能的position居中方法
inrtyx的专栏
12-18 1816
首先给父元素写上positon:relative，这么做是为了给子元素打上position:absolute的时候不会被定位到外太空去。接下去，写上子元素的height和width。接着就是整个方法的核心，给子元素再打上top:50%;left:50%以及margin-top:一半的height值的的负数;margin-left:一半的weight值的负数。整理一下之后，可能你会给你的子元素写上这
html盒子垂直居中
最新发布
12-29
3. 由于子盒子的位置是以左上角为基准的，所以需要通过负的margin值将子盒子向左上方移动自身宽高的一半，以实现垂直居中的效果： ```css .child { transform: translate(-50%, -50%); } ``` 完整的HTML和CSS代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值