平时,用的方法即第一种方法是设置left,top值均为50%,同时margin-left设置为绝对定位元素width的一半取负,margin-top设为其height的一半取负。
例如，绝对定位元素的width:100px;height:100px;
代码如下:
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
这是比较常用的一个方法，今天介绍一个巧妙的方法，是利用了绝对定位元素的自动伸缩的特性实现的。
代码如下：
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
上面就是第二种方法：设置margin:auto;设置left和right的值相等,top和bottom的值相等,
注意：left和right的值不能超过其相对元素width减去它自身width的一半,否则绝对定位元素会优先取left值进行定位(前提是文档流是从左向右),但是top和bottom的值却没有这个限制。
方案一：div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】， 方案二：div绝对定位水平垂...
已知高度宽度元素的水平垂直居中 方法一:绝对定位与负边距实现 利用绝对定位，将元素的top和left属性都设为50...
问题：怎样实现div元素居中（垂直、水平）？ 方法1：绝对定位法（transform属性） 使用css3的tran...
1、垂直居中 2、水平居中 3、垂直水平居中 方法1：使用绝对定位 方法二：使用display:flex 扩展1：...
1.div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】 兼容性：,IE7及之前版本不支持 ...
水平居中 文字居中 图片居中 绝对定位元素 居中 相对定位 负边距居中 垂直居中 文字设置line-height ...
网页布局中，元素水平居中比垂直居中简单不少，同时实现水平垂直居中也不难，难的是想出多种实现水平垂直居中的方法并从中...
目录 水平居中 垂直居中 水平垂直居 一、水平居中 内联元素和块级元素实现水平居中的方法不一样，其中块级元素又分定...
块元素水平垂直居中 使用flex布局将子元素水平垂直居中 使用position定位 或
绝对定位实现垂直水平居中优点：兼容性好缺点：需要知道宽高，不够灵活 transform实现垂直水平居中优点：不需要...
本文标题：实现绝对定位元素水平垂直居中的两种方法
本文链接：https://www.haomeiwen.com/subject/jqhqmxtx.html
网友评论