当前位置: 首页 > Web前端 > HTML

垂直居中---只需要两个小栗子

时间:2023-04-02 13:09:10 HTML

首先明确一下概念:left指的是子元素的leftmargin和父元素的leftpadding之间的距离。margin:auto表示自适应,浏览器自动计算translatex:关于x轴的坐标转换,当值为百分比时,是相对于自身宽高的。理解了以上三点,就可以基本理解各种垂直居中的方法1.top:0;bottom:0;left:0;right:0;margin:auto;这个方法的意思是先把子元素margin和父元素padding的距离设置为0,可以理解为子元素和父元素之间没有空隙,然后margin设置为auto,以及margin等于子元素到父元素的距离,也就是说子元素不是真正居中的意思,只是让子元素中间的内容居中,子元素和父元素由计算机自动计算(均分);注意这个方法需要和子元素position:absolute一起使用,因为默认margin:auto只对上下起作用,对左右不起作用,加上position使元素脱离标准流,margin:auto可以识别

.father{width:400px;高度:400px;背景色:粉色;位置:相对;}.son{宽度:100px;高度:100px;背景颜色:红色;位置:绝对;顶部:0;0;左:0;右:0;margin:auto;}2.transform:translate()这种方法适用于不知道父元素宽高的情况(面试官可能会问这个)。该方法是先将元素定位到父元素top:50%的50%的位置;左:50%;见下图:注意子元素的左上角是在父元素的中间,而整个子元素是在父元素右下四分之一的左上角,然后通过transform:translate(-50%,-50%),子元素相对自身移动50%,使子元素居中。需要注意的是,定位position:relative要写在self元素中;这样就可以根据父元素来确定定位的基点。
.father{width:500px;高度:500px;背景色:粉色;/*position:relative;*/}.son{width:100px;高度:100px;背景色:红色;职位:相对;顶部:50%;左:50%;transform:translate(-50%,-50%);}两个小栗子完了,明白了吗?文末再发两颗栗子(#^.^#)3.line-height当div中没有??内容时,高度为0,当有文本等内容时,div有高度.是支持div的文字吗?开了?其实不是,这个高度是由元素的line-height决定的。当line-height设置为div的高度时,div中的文字居中显示。代码很简单qqqqq.line{width:100px;高度:100px;行高:100px;文本对齐:居中;背景:灰色;}4.表格使用表格布局也可以实现居中qqqqqqqqqq.father{宽度:400px;高度:200px;显示:表格单元格;文本对齐:居中;垂直对齐:中间;//红框上下居中background-color:pink;}.son{width:100px;高度:100px;显示:内联块;背景颜色:红色;行高:100px;//文本在红框内居中}