星空网 > 软件开发 > 网页设计

html中的水平居中和垂直居中的问题。(固定高度与高度不定)

    在布局的过程中,我们要对某些元素进行居中定位,相信,大家对水平居中都没有问题,就是利用

     margin:0 auto;以及文本居中 text-align:center。

    下面我想给大家说的是关于整体居中(水平居中和垂直居中),

    在这里,我首先告诉大家我利用了绝对定位的办法,

    我现在先给大家制作一个框来直接的观察,如下

html中的水平居中和垂直居中的问题。(固定高度与高度不定)

    其中外框与内框分别是边长为300px和100px的正方形。

    我们要把内框居中。(此时,内框高度是固定的)

1 当高度固定时。

     一般我们会直接这样进行代码操作,

     position:absolute;

     top:50%;

     left:50%;

     这样乍眼一看,没有任何问题,但在进行操作后,我们会发现

html中的水平居中和垂直居中的问题。(固定高度与高度不定)

     内框并没有居中,这种情况的产生在于,我们忽略了内框是一个形状体,并不是一条线。

     解决这种问题,我们要利用margin负值,通过负值,将整体再进行移动,而移动的数值为边框的长度的一半。

     代码如下:

     position:absolute;

     top:50% margin-top:-50px;

     left:50% margin-left:-50px;

     效果如下:

html中的水平居中和垂直居中的问题。(固定高度与高度不定)

     负值的利用可以让标签靠近父元素,通过这样我们就达到了居中的效果。

     2 高度不定的情况下

     其实两者的原理是一样的,不过是在高度不定时,我们无法选取高度的一半,只需将代码改变一部分:

     position:absolute;

     top:50% ;

     left:50% ;

     transform: translate( -50%, -50%);

     这样,也完成了居中效果。

     大家快去试试吧。




原标题:html中的水平居中和垂直居中的问题。(固定高度与高度不定)

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

中通海外仓:https://www.goluckyvip.com/tag/49385.html
中通云仓科技:https://www.goluckyvip.com/tag/49386.html
中外运敦豪:https://www.goluckyvip.com/tag/49388.html
市场趋势调研:https://www.goluckyvip.com/tag/4939.html
中维质检:https://www.goluckyvip.com/tag/49390.html
中文出海:https://www.goluckyvip.com/tag/49391.html
仿品独立站从建站、推广、收款到底怎么玩?:https://www.kjdsnews.com/a/1836312.html
仿品独立站从建站、推广、收款到底怎么玩?:https://www.goluckyvip.com/news/186215.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流