【CSS】3种CSS方法设置元素垂直水平居中

【【CSS】3种CSS方法设置元素垂直水平居中】的更多相关文章

【CSS】3种CSS方法设置元素垂直水平居中

1. 宽高固定设置要水平垂直居中的 div 的 position 为 absolute,left:50%; margin-left为负的这个元素宽度的一半,同理,top:50%;margin-top为负的这个元素的高度的一半. #child { width:300px; height:200px; position:absolute; left:50%; margin-left:-150px; top:50%; margin-top:-100px; } 2. 宽高不固定由 1 可演变,既然…

巧用translate设置元素垂直水平居中

之前在做手机项目时,用到很多自定义弹窗,然后要求都垂直水平要居中,最开始的时候想用calc来计算,可是css3 的calc兼容性不是很好,于是后来就借助了js来计算, 今天偶然看到别人的一个方法,瞬间感觉自己做了很多无用功~~ translate,translate,translate,translate.. 简单的css代码就可以实现: .align{width:300px; height:300px; border:5px solid #; position:absolute; left:%…

div+css实现未知宽高元素垂直水平居中

div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用会对页面性能造成影响,而且能用CSS实现的干嘛用JS呢,嘿嘿 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>div+…

CSS之文本溢出隐藏，不定宽高元素垂直水平居中、禁止页面文本复制

1.如何让不固定元素宽高的元素垂直水平居中 .center { position: absolute; top: 50%; left: 50%; background-color: #000; width:50%; height: 50%; transform: translateX(-50%) translateY(-50%); } flex布局写法: .center{ display:flex; justify-content:center align-items:center; } 2.禁…