html 绝对位置居中,如何在div中对绝对定位元素进行居中？

响应解

这里有一个很好的解决方案用于响应性设计或未知尺寸总体而言如果你不需要支持IE8和更低的。.centered-axis-x {

position: absolute;

left: 50%;

transform: translate(-50%, 0);}

.outer {

position: relative; /* or absolute */

/* unnecessary styling properties */

margin: 5%;

width: 80%;

height: 500px;

border: 1px solid red;

}

.inner {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

/* unnecessary styling properties */

max-width: 50%;

text-align: center;

border: 1px solid blue;

}

I'm always centered
doesn't matter how much text, height or width i have.
The dimensions or my parent are irrelevant as well

线索是，left: 50%是相对于父级的，而translate转换相对于元素的宽度/高度。

这样，您就有了一个完美的居中元素，子元素和父元素都具有灵活的宽度。奖励：即使孩子比父母大，这也是可行的。

您也可以用它垂直对中(同样，父级和子级的宽度和高度可以完全灵活(和/或未知)：.centered-axis-xy {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);}

记住你可能需要transform供应商的前缀也是。例如-webkit-transform: translate(-50%,-50%);

html 绝对位置居中,如何在div中对绝对定位元素进行居中？相关推荐

php h1怎么居中,html-如何在div中垂直居中放置H1？
html-如何在div中垂直居中放置H1? 首先,我道歉. 我知道这里针对此问题发布了各种解决方案,但是对于我一生来说,我无法让它们发挥任何作用. 对于响应式网站,我正在尝试将H1放在div中. 水平 ...
html判断坐标,js判断鼠标位置是否在某个div中的方法
本文实例讲述了js判断鼠标位置是否在某个div中的方法.分享给大家供大家参考,具体如下: div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判 ...
css如何实现让div中的多行文字居中显示
标题css如何实现让div中的多行文字居中显示最近在做项目的时候遇到一个div中有多行文字(可能一行也可能多行)需要实现居中显示,试了好多方法都不行,显然不能使用padding来居中,因为文字有多少 ...
Html怎样往div中添加文本,给div中添加文本元素
[javascript]代码库给div中添加文本元素 div{ border: 1px solid blue; background-color: green; width: 300px; heig ...
js判断鼠标位置是否在某个div中
div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办 ...
如何在div中垂直对齐图像
如何在包含div内部对齐图像? 例在我的示例中,我需要使用class ="frame "将<img>在<div>垂直居中: <div class=& ...
div中图片水平竖直居中
.imgShow { width: 9rem; height: 9rem; background-color: #ffa8b4; <!-- 主要功能代码就这三行给父类div加这三行代码就居中 ...
android控件位置居中,Android 的布局中如何使控件居中
首先要分两种不同情况,在两种不同的布局方式下:LinearLayout 和RelativeLayout 1. LinearLayout a). android:layout_gravity=" ...
伪元素在父元素中居中_web前端Html5开发CSS之元素五大居中方式，实用又简单！...
大家是不是对元素居中的知识点很是模糊?是不是苦于找不到一个总结的通俗易懂的说明?是不是自己懒得去总结?今天小编在前端的学习与实践中总结出的元素的五大居中方式,黏贴了代码并对代码做了解释,希望对迷茫的有 ...

html 绝对位置居中,如何在div中对绝对定位元素进行居中？

html 绝对位置居中,如何在div中对绝对定位元素进行居中？相关推荐

最新文章

热门文章