css篇之absolute绝对定位元素居中技巧

smallStone 发布于2019-08-30 15:52 / 2602人阅读

摘要：一般地，居中绝对定位元素，再负值或者通过也可达到效果。今天发现另一个技巧，利用，取值，再即可实现居中。原因注子元素大的话，上下可居中，左右失效。

一般地，居中绝对定位元素，left:50%;top:50%;再margin负值或者通过transform也可达到效果。
今天发现另一个技巧，利用，top,left,right,bottom取值0，再magin:auto,即可实现居中。
原因：

For absolutely positioned elements, the top, right, bottom,and left properties specify offsets from the edge of the element"s containing block (what the element is positioned relative to).The margin of the element is then positioned inside these offsets.

div.box{
   position: relative;
   height: 300px;
   background: #989eaa;
}
div.fz{
   width: 100px;
   height: 100px;
   background: #499682;
   position: absolute;
   top:0;
   left: 0;
   right: 0;
   bottom: 0;
   margin:auto;
}

注：子元素大的话，上下可居中，左右失效。

云服务器 GPU云服务器 absolute居中绝对居中文字绝对居中相对定位-绝对定位

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116439.html

css篇之absolute绝对定位元素居中技巧

摘要：一般地，居中绝对定位元素，再负值或者通过也可达到效果。今天发现另一个技巧，利用，取值，再即可实现居中。原因注子元素大的话，上下可居中，左右失效。一般地，居中绝对定位元素，left:50%;top:50%;再margin负值或者通过transform也可达到效果。今天发现另一个技巧，利用，top,left,right,bottom取值0，再magin:auto,即可实现居中。原因： F...

zhoutao 2019-08-01 16:17 评论0 收藏0
CSS水平或垂直居中技巧

摘要：适用情景单对象水平居中原理将子元素设置块级表格，再设置水平居中。结语有些是水平居中，有些是垂直居中，将它们某两个合在一起就能实现水平和垂直均居中。前言 css水平和垂直居中是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。说来惭愧，在两年前面试的时候，我完全不知道如何做到水平和垂直均居中的方法，那场面别提有多尴尬了（ps：特想找个地洞钻进去）。。。时隔两年，对于这个...

CastlePeaK 2019-08-30 11:22 评论0 收藏0
关于css布局、居中的问题以及一些小技巧

摘要：例一个高的，里面的文字垂直居中使该元素变大倍动画过渡效果 CSS的两种经典布局左右布局一栏定宽，一栏自适应定宽自适应 .left{ width: 200px; height: 600px; float: left; display: table; text-align: ...

zacklee 2019-08-29 16:55 评论0 收藏0
CSS 各种定位（position）方式的区别

摘要：绝对定位元素从文档流删除，并相对于包含块定位。固定定位元素从文档流删除，并相对于浏览器视窗定位，因此不随文档滚动而移动。定位（position） position: relative/absolute/fixed/static/inheri absolute :生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。 fixed （老IE不支持）生成绝...

i_garfileo 2019-08-29 11:18 评论0 收藏0