css中垂直水平居中的方式有哪些 CSS之垂直水平居中的背后
最开始,我想说,这个体系有点大,我写的并不好。就当作是一个思路吧,虽然这个思路有点乱。几乎每一个实现方案的背后都是该属性及其组合的原理,每一个都要剖析其规范细节的话,这篇文章绝不会是这样的篇幅,所以每
顺晟科技
2022-09-14 10:43:01
195
/*实现一、原理:要让div等块级元素水平和垂直居中,必需知道该div等块级元素的宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,
这个50%就是指页面窗口的宽度和高度的50%,最后将该div等块级元素分别左移和上移,左移和上移的大小就是该div等块级元素宽度和高度的一半。该方法使用普遍,
但是前提是必需设置div等块级元素的宽度和高度。如果当页面div等块级元素宽度和高度是动态的,比方说需要弹出一个div等块级元素元素层并且要居中显示,
div等块级元素的内容是动态的,所以宽度和高度也是动态的,这时需要用jQuery可以解决居中。*/ .mycss{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px } /*实现二原理:利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中*/ .mycss{ position: absolute; left: 0px; right: 0; top: 0; bottom: 0; margin: auto; height: 200px; width: 300px; }
19
2022-10
15
2022-10
15
2022-09
15
2022-09
14
2022-09
14
2022-09