css怎么设置div相对网页居
css怎么设置div相对网页居中?
css让div居中
1.对div使用绝对布局“position:absolute;”;
方法一:对div使用绝对布局position:absolute;并设置top,left,right,bottom的值相等,但不一定都等于0;并且设置margin:auto
{position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
2.对div使用绝对布局并把top和left的值都设置为50%;
方法二:这个方法要知道div的宽度和高度。对div使用绝对布局position:absolute;并把top和left的值都设置为50%;50%就是指页面窗口的宽度和高度的50%;最后将div左移和上移,左移和上移的大小为div宽度和高度的一半
{position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}
3.通过css3的transform属性实现div居中。
方法三:div使用绝对定位position:absolute,并且设置left和top的值都为50%。使用css3的transform属性。transform:translate(-50%,-50%)
{position:abslolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-webket-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
}
若有两个div,里面小的div相对于外面大的div水平垂直居中对齐,有以下几种方法。
1.利用position和margin:auto实现。父元素设置position:relative;子元素设置position:absolute,并设置top,left,right,bottom值相等。
父元素{
position:relative;
}
子元素{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
2.使用position。父元素设置position:relative;子元素设置position:absolute。并设置top和left为50%,并设置左移和上移为子元素的大小的一半
父元素{
position:relative;
}子元素
{position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}
使用display:flex。这种方法需要设置浏览器的兼容性。
{display:flex;
display:-webkit-flex;
justify-content:center;
-webkit-justify-content:center;
align-items:center;
-webkit-align-items:center;
margin:0 auto;
}
3.使用transform:translate()。父元素设置position:relative;子元素设置position:absolute。并设置top和left为50%。最后设置transform:translate(-50%,-50%)
父元素{
position:relative;
}子元素
{{position:abslolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfckkf
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01