absolute内容自适应居中【absolute居中】

1、方法一：中心点定位（已知盒子大小）html,body{width:;height:;}body{width:1px;position:relative;left:50%;top:50%;height:1px;}.wrap{position:absolute;left:-300px;top:-200px;width:600px;height:400px;background:#000;} 。

2、方法二：上下左右（已知盒子大小）html,body{width:;height:;}.wrap{position:absolute;left:0;right:0;top:0;bottom:0;width:600px;height:400px;margin:auto;background:#000;} 。

3、方法三：csstransform（盒子大小可自适应）html,body{width:;height:;}.wrap{position:relative;left:50%;top:50%;width:600px;height:auto;background:#000;transform:translate(-50%,-50%);color:#fff;font-size:20px;line-height:35px; } 壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上，徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。。

1、肯定不行了啊，定位以后就脱离了父级盒子，只能以父级为参考进行定位，你可以理解为定位以后就浮在了父级上面，所以margin中auto就没有了参考值，如果定位以后还想居中，可以left、50%。

2、margin-left、负的盒子宽度的一半即可。

1、使用自动外边距实现居中CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto即可。在实际使用中，我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就是，必须为该容器指定宽度：复制内容到剪贴板代码: div#container{margin-left:auto;margin-right:auto;width:980px;}在大多数主流浏览器中，这种方法都有效，即使是Windows平台上的IE在其标准兼容模式（compliancemode）下也能够正常显示。但不幸的是，在更低版本的IE中，这种设置却并不能实现居中效果。所以若想在实际项目中使用这种方法，那么就要用户的IE浏览器版本不低于0。 尽管在支持上不尽如人意，但大多数设计师都建议尽可能地使用这种方法。该方法也被认为是在各种用CSS实现元素水平居中方法中正确、合理的一种。。

2、使用text-align实现居中另一种实现元素居中的方法是使用text-align属性，将该属性值设置为center并应用到body元素上即可。这种做法是彻头彻尾的hack，但它却能兼容大多数浏览器，所以在某些情况下也自然必不可少。 之所以说它是hack，是因为这种方法并没有将文本属性应用到文本上，而是应用到了作为容器的元素上。这也给我们带来了额外的工作。在创建好布局必须的div之后，我们要按照如下代码为body应用text-align属性：复制内容到剪贴板代码: body{text-align:center;}之后会出现什么问题吗？body的所有子孙元素都会被居中显示。因此，我们就需要用再写一条规则，让其中的文本回到默认的居左对齐：复制内容到剪贴板代码: p{text-align:left;}可以想象这条附加的规则将带来一些不便。另外，真正完全遵循标准的浏览器并不会改变容器的位置，而只会让其中的文字居中显示。。

3、组合使用自动外边距和文本对齐因为文本对齐居中方式有着良好的向下兼容性，且自动外边距方式也被大多数当代浏览器支持，所以很多设计师将二者组合起来使用，以期让居中效果得到大限度的跨浏览器支持：复制内容到剪贴板代码: body{text-align:center;} #container{margin-left:auto; margin-right:auto;    //相当于margin：0auto；border:1pxsolidred;width:980px;text-align:left}可是这始终是个hack，无论如何也算不上。我们还是需要为居中容器中的文本编写附加的规则，但至少在各个浏览器中看起来都不错。。

4、负外边距解决方案负外边距解决方案远不是仅仅为元素添加负外边距这么简单。这种方法需要同时使用定位和负外边距两种技巧。 下面是该方案的具体实现方法。首先，创建一个包含居中元素的容器，然后将其定位于相对页面左边边缘50%的位置。这样，该容器的左外边距将从页面50%宽度的位置开始算起。 然后，将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点。复制内容到剪贴板代码: #container{background:#ffcurl(mid.jpg)repeat-ycenter;position:absolute;left:50%;width:980px;margin-left:-490px;  //除去自身的宽度，就是居中位置咯}看，没有任何hack！虽然这并不是首选的解决方案，但也是个不错的方法，且适用性极广—甚至在NetscapeNavigatorx中都没有任何问题，很令人吃惊，不是吗？所以若想得到广泛的浏览器支持，那么这种方法将会是好的选择。

1、你的这方法是可以的.前台页面基本上就是这种效果.但如果说不定义高度的话让高度自适应屏幕的话.浏览器不兼容是一个问题.因为本身main里的高度是随内容增加而自动延伸的..假如内容少的话肯定不能自适应屏幕高度.height、的话.有两个浏览器是可以实现的.但主要的还是IE6里不能实现.只能借助JS来写才行.网上也有介绍这种的方法.可以去查一下.。

1、定位法：position:absolute如果子级div有定义宽和高的话就可以用这个方法。注意：margin-top,和margin-left的值均为高和宽值的一半。大家可以去尝试下看看效果。。

2、margin:auto法这个也可以是定位法。用这个方法要求子级div必须设置宽的值，不然没有效果哦~margin:auto是水平垂直都居中，如果仅仅设置水平居中，可设置为margin:auto0;同理，如果仅仅设置垂直居中，可设置为margin:0auto.。

3、display:table-cell法这个方法主要针对多行文字内容的垂直居中对齐。注意：text-align:center设置了文字的水平居中对齐，vertical-align:middle设置的是垂直居中对齐。。

4、transform:translate(x,y)法这个是css3中的新属性，如果子级元素没有设置宽和高值的话可以用这个方法来实现。这在我们做自适应页面的时候可以用到。。

5、before，after伪元素法这个也是让子级元素垂直居中了。如果还想要水平居中的话可以配合其他几种方法配合使用来实现，比如给子级元素设置：margin:0auto;这样就水平和垂直都居中了。。

6、Flex布局法这个方法要充分考虑浏览器的兼容性。要垂直居中的元素也是无需设置宽和高的值，可以用在自适应页面中来实现水平垂直居中。。

1、如果知道图片宽高，可以将图片设置为定位，父级相对定位假定图片宽高为100x200div{position、relative}div?img{position、absolutedisplay、blocktop、50%left、50%margin-top、-100pxmargin-left、-50px}。

1、如果知道图片宽高，可以将图片设置为定位，父级相对定位假定图片宽高为100x200div{position、relative}div?img{position、absolutedisplay、blocktop、50%left、50%margin-top、-100pxmargin-left、-50px}。

1、div居中。效果如下图，就是固定大小的div在浏览器中垂直、水平都居中，适合用到浮动弹出框、页面居中的登陆框等你想得到的地方。以前我也曾使用window.onload和window.onresize来控制高度自适应，宽度好说，兼容IE和其他主流浏览器的，直接文本居中，内部“margin:0auto;”。。

2、废话不说，下面是现在的纯css解决方法。以宽高为400px*300px的div居中为例，body内只有div，所以简写css如下：div{width:400px;height:300px;position:absolute;left:50%;top:50%;margin-left:-200px;margin-top:-150px;background:#f}。

3、完整html源码如下：testdiv{width:400px;height:300px;position:absolute;left:50%;top:50%;margin-left:-200px;margin-top:-150px;background:#f}这样就实现了居中，另外，如果设计中外边框添加了border，div设置了padding等，一定要注意margin值要排除border宽或者padding值。。

4、宽高自适应。效果如下图，很多情况下，我们希望页面的宽高可以自适应，宽度自适应很简单，当然，这里所说的自适应不是自适应内容，而是自适应浏览器，在同一行级只有一个层的情况下，宽度自适应直接使用width:;就可以了，但是高度自适应就有些不遂人意了，很多时候设置height:;完全不起效，其实，这时完全是因为div所在位置的上级元素没有指定高度。。

5、同样以一个div为例，css如下：html,body{height:;width:;margin:0;padding:0;}div{height:;width:;background:#f}完整html源码如下：testhtml,body{height:;width:;margin:0;padding:0;}div{height:;width:;background:#f}这里有一个细节问题吗，为什么设置body的height为的同时还要设置html呢？其实是为了解决firefox的兼容性，firefox默认body占用的不是；，这里有一个设计思想就是，如果某个层要用到或者其他值的百分比，上一级必须指定高度，当然，这同样应用到div下的div，具体该怎么写，大家摸索吧。。

6、多栏宽度自适应。效果如下图，前面第二部分已经将过完全的自适应宽高，但其中的宽度自适应只是在一个div独占一行的情况下，如果出现多个div，如常见的主题部分左右、左中右布局的网站页面，两边固定宽，中间自适应，改怎么写呢？其实只要在中间部分的div下再套一层div即可。。

7、示例css如下：html,body{height:100px;width:;margin:0;padding:0;}.left{height:100px;width:100px;background:#CCfloat:left;}.middle{margin:050px0100px;}.middle.content{height:100px;width:;background:#Ffloat:left;}.right{height:100px;width:50px;background:#09F;float:left;}完整html源码如下：testhtml,body{height:100px;width:;margin:0;padding:0;}.left{height:100px;width:100px;background:#CCfloat:left;}.middle{margin:050px0100px;}.middle.content{height:100px;width:;background:#Ffloat:left;}.right{height:100px;width:50px;background:#09F;float:left;}当然，两栏以及更多栏目都适应此方法，具体就不再举例了。。

1、这样写相对定位。

转载请注明出处阿文说说网 » absolute内容自适应居中【absolute居中】