margin:auto实现绝对定位元素的水平垂直居中

代码拍上,赶时间的童鞋拿着用就好:

div {
width: 1000px; height: 500px;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 重点在于 auto */
}

博主之前用的方式也是不错,只是在不知道“container”的长、宽时需要额外使用JQ来获取长宽,这么看来,第一种方法更加万金流:)

#container{
position:absolute;
left:50%;
top:50%;
margin:-25px 0 0 -100px;
}

时间: 2024-08-29 11:45:32

margin:auto实现绝对定位元素的水平垂直居中的相关文章

小tip: margin:auto实现绝对定位元素的水平垂直居中

转载自:http://www.zhangxinxu.com/wordpress/?p=3794 一.绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了. 兼容性不错的主流用法是: .element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度

绝对定位元素实现水平垂直居中

第一种: .element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度的一半 */ } 但,这种方法有一个很明显的不足,就是需要提前知道元素的尺寸.否则margin负值的调整无法精确.此时,往往要借助JS获得. 第二种: CSS3的兴起,使得有了更好的解决方法,就是使用transf

绝对定位元素水平居中和垂直居中的原理

通常在设置绝对定位元素相对于其定位的祖先元素水平垂直居中时,通过绝对定位元素设置margin:auto; top:0; bottom:0; right:0; left:0;就可以实现.下面简单探索一下绝对定位元素这么设置就可以实现水平居中和垂直居中的原理. 核心CSS代码: position:absolute; margin:auto; top:0; bottom:0; right:0; left:0; 绝对定位元素的布局由元素的三个因素决定:位置(top.bottom.left.right).

CSS子元素在父元素中水平垂直居中的几种方法

1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 300px; border: 1px solid red; } #div1 p { width: 100px; height: 100px; background-color: green; /*float: left; !*如果设置了浮动,则自动居中就会失效.*!*/ margin: 0 auto;

绝对定位情况下水平垂直居中小技巧

非绝对定位情况下,一般使用margin:0 auto的方法来进行居中,但在绝对定位情况下,margin:0 auto会失效. 这时,进行水平垂直居中可以如下: position:absolute;left:50%; //left设置为50%,这时是以元素的左侧进行的水平居中,所以需要设置margin-left为元素宽度的一半.top:50%;//垂直居中原理同水平居中margin-top:-100px;margin-left:-100px;width:200px;height:200px;z-i

如何将一个绝对定位的div水平垂直居中对齐

如何将一个绝对定位的div垂直居中对齐:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在某些时候可能需要将一个绝对定位的div在它的父对象中垂直居中对齐,可能用到的频率不是太高,但是偶尔也会用到,下面就简单介绍一下如何实现此功能.在通常情况下,可以为元素添加margin:0px auto即可让元素在它的父元素水平居中,然后再将它设置为垂直居中对齐即可.但是为绝对定位的对象添加margin:0px auto并不能生效,所以说还是要用老办法实现.代码示例如下: <!DOCTYPE html>

图片在父元素里面水平垂直居中

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

如何实现固定宽高的DOM元素的水平垂直居中

效果: 实现代码1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{margin: 0; padding: 0;} #div1{ margin-top: 100px; margin

jquery实现元素自适应水平垂直居中

(function($){ $.fn.vhAlign =  function(){ return this.each(function(i){ //获取元素的内容高度 var h = Math.ceil($(this).height()); //outerHeight=padding+border+height var oh = Math.ceil($(this).outerHeight()); //取得margin-top值 var mt = Math.ceil(oh / 2); //取得元素