使用定位position实现元素居中

最新推荐文章于 2023-10-13 15:41:15 发布
最新推荐文章于 2023-10-13 15:41:15 发布
阅读量4.3k 收藏 2
点赞数 4
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34644270/article/details/102715635
版权

在使用绝对定位时要想实现水平居中，可以按照下图的方法：
使用定位居中

  1. left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
  2. margin-left: -100px;：让盒子向左移动自身宽度的一半。
    垂直居中同上

同时可以使用css3中的translate()来实现居中.
translate中的百分比单位是相对于自身元素的
把margin-left:-100px;改成

transform: translateX:(-50%);向左移动自身宽度的一半.

如果垂直居中则使用

top:50%;
transform: translateY:(-50%);向上移动自身高度的一半

LeonGus
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
CSS定位position总结（超详细哦！）
weixin_52625590的博客
08-01 3万+
开始学习css页面布局时，先接触到的有 **标准流 或 浮动**，但是经过后续的学习发现有些场景很难通过标准流 或 浮动来快速实现。 例如： **场景1**： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。 **场景2**：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。 这个时候我们就需要学习新的布局方法了——`定位（position）`...............
css3 position fixed固定居中问题解决方案
12-13
通常，我们要让某元素居中，会这样做： 复制代码代码如下:#element{ margin:0 auto; } 如果还想让此元素位置固定呢？一般我们会添加position:fixed，如下： 复制代码代码如下: #element{ position:fixed; margin:0 auto; } 但是这样做的结果就是，元素不居中了。这说明fixed使对象脱离了正常文档流。 解决方案： 复制代码代码如下: #element{ position:fixed; margin:0 auto; left:0; right:0; } 但是在IE7以下的版本中无法工作，要将其更改为： 复制代码
position的4种定位以及居中的2种方法。
热门推荐
tjh1998的博客
02-26 2万+
参考文章：https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 1.z-index设置元素在垂直于显示屏（z轴方向上）的堆叠顺序，值大的元素发生重叠时会盖在值小的上面。 2.正常流（常规流）不会受到top，right,left,bottom的影响。 例如： <!doctype html> <html lang="en&quot
position定位属性 以及 元素居中方式
m0_51328823的博客
01-07 2643
定位属性position 在css中比较重要的便是position和float。 定位是将盒子定在某一个位置自由的漂浮在其他盒子的上面 定位的语法 定位=定位模式+边偏移(left right top bottom) 定位的属性值 1.静态定位 position: static; 相当于没有定位 设置边偏移无效 2.相对定位 position: relative; 1.相对于 自己原来在标准流中位置来移动的 2.不脱标(继续占有原来的位置，后面的盒子仍然以标准流的方式对待它) 3.绝对定
web前端的position定位及元素居中方式
tuantaun_的博客
07-27 2917
position定位方式 1.position:static 无定位（默认值） (1).元素出现在正常文档流（top、right、left、bottom等属性不使用） (2).当没有对一个元素指定定位时，使用static（默认），也就是按照文档的流式（flow）定位，将元素放到合适位置 (3).在不同分辨率下，采用流式布局可以很好地自适应，取得较好布局 2.position：inherit 继承父...
CSS实现定位元素居中的方法
01-19
绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果，很多人心里已经有答案了。 兼容性不错的主流用法是： CSS Code复制内容到剪贴板 .element { width: 600px; height: 400px; position:...
css中position:fixed实现div居中上下左右居中
09-25
实现div居中的方法多如牛毛，本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中，这个小技巧比较使用，大家看看
CSS实现元素居中原理解析
01-19
在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了。但就是这样一个从理论上来看似乎实现起来极其简单的，在实践中，它往往难住了很多人。 让元素水平居中相对比较简单：如果它是一个行内元素，就对它的父元素...
使用CSS居中浮动元素的方法
12-13
为了使子元素居中，可以使用`right: 50%`将其右边缘移动到父元素的中心，或者使用`left: -50%`将其左边缘移动到父元素的中心。以下是代码示例： ```html <!DOCTYPE html> <title>Demo .p { position: ...
小白成长日记之CSS：用定位实现居中
weixin_44358713的博客
02-23 1159
在初学阶段我们经常会用到定位，居中问题是不可避免的，记录一下常见的几种实现方式。当然后期学到flex布局相对而言实现居中会更方便。
定位、元素垂直水平居中的方法
hello world
05-07 1447
static：默认值，无特殊定位1.相对定位 position:relative;参考点:原来的位置;原来的位置仍然占位,不脱流;2.绝对定位 position:absolute;参考点:带有定位的最近一级的父元素,都没有定位,以html为参考点;原来的位置不占位,脱流;3.固定定位 position:fixed;参考点:浏览器的可视窗口(浏览器的四条边);原来的位置不占位,脱流;4.粘性定位 position:sticky;(兼容性差)
用 position 实现上下左右居中
bubbleSweet的博客
05-11 2167
用 position 实现上下左右居中 <div class="father"> <div class = "child1"></div> </div> .father { border: 10px solid black; overflow: hidden; height: 500px; }
CSS中实现元素水平居中、垂直居中的6个方法（详解）
xtcbql的博客
09-30 2万+
CSS中实现元素居中6个的方法、text-align、margin：auto、line-height、flex布局、position
简单总结position定位和元素水平垂直居中
qq_37012533的博客
12-11 7662
position position的属性值共有四个常用的：relative、absolute、fixed、static。 首先普及一下文档流的知识：显示元素对象在窗口排列时所占用的位置，自上而下，从左到右。脱离文档流会影响其他元素的位置。 relative：相对定位，不脱离文档流，在文档流原先的位置进行位移。 absolute:绝对定位，脱离文档流，相对于最近的且不为static的父元素进行定位，...
position定位属性值和元素水平、居中得面试题
yangpengze的博客
01-07 624
position定位得几种方式 position:static static(没有定位)是position的默认值，元素设置相对于原本位置的定位， 元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受 到影响 position:relative 这是相对定位是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响，一般配上position:absolute来使用俗称父相子决 position:absolute
css中设置居中
最新发布
Angel__Boys的博客
10-13 187
position属性和transform属性可以对块级元素实现水平居中，需要将position属性设置为absolute或fixed，再使用transform属性将元素向左平移50%。position属性和transform属性也可以实现元素的垂直居中，需要将position属性设置为absolute或fixed，再使用transform属性将元素向上平移50%。在Web设计中，居中是非常常见的需求，尤其是在布局中。3.使用position和transform（针对块级元素）
[CSS] position:absolute水平居中
刘师傅的博客
11-09 1万+
最近听了周杰伦的《不爱我就拉倒》，感觉周董现在写歌有点任性，反正我就是要这样写，你们爱听不听。好吧，好吧，有才真的是可以为所欲为。不过，周董应该是少量的一些硬核的歌手，很多歌词都是拳拳到肉，不像大部分歌手的歌那样，一顿呻吟。。。说了一堆废话（//▽//） 言归正传，对于设置了position:absolute的元素怎么设置水平居中。 1 __ 最开始的时候一直用了比较蠢的方法，在元素外部套一层...
CSS中元素水平居中显示的方法
02-11 423
CSS中元素水平居中显示的方法 用CSS让元素居中显示并不是件很简单的事情。同样的CSS居中设置在不同浏览器中的表现也各有千秋。本文就介绍了在CSS中常见的几种让元素水平居中显示的方法。 1.使用自动外边距实现居中 CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto即可。在实际使用中，我们可以为这些...
前端学习-position定位、浮动的影响和垂直水平居中
weixin_51346866的博客
03-01 441
先记那么多先，position后面二个属性可以再补充一下。
position: relative 元素居中
07-16
这些方法中，第一种是使用相对定位和`left: 50%`将元素的左边缘移动到父元素的水平中心，然后使用`transform: translateX(-50%)`将元素向左移动自身宽度的一半，以实现水平居中。 第二种方法是使用`flexbox`布局，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值