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

《前端厚话》css布局方式横竖排版的实现

时间:2023-03-30 14:50:57 CSS

title:css布局方法实现水平和垂直布局居中布局:将浮动元素居中居中绝对定位的DIV垂直居中分为水平居中、垂直居中、完全居中(水平和垂直居中),下次实现不用死记硬背水平居中内联元素的方式可以通过声明text-align:center;来实现。在其父节点中,适用于inline、inlineblock、inlinetable、inlineFlex块级元素可以传margin:0auto;+widthwidth(在现代浏览器中要实现水平居中,可以使用display:flex;justify-content:center;但是在IE8-9等不支持flexbox布局的旧浏览器中,上述代码不会生效.此时要在父元素中实现居中,可以使用margin:0auto)节点不是块级元素,需要声明display:block如果已经隐式声明了节点宽度,则不用需要显式声明width绝对定位absolute+movingtransform绝对定位absolute+margin负边距解决方案display:flex+justify-content:center垂直居中子元素如果是单行文本,直接line-height等于到父节点的高度display:flex+align-items:center绝对定位absolute+mobiletransform绝对定位absolute+margin负边距方案水平和垂直居中元素的宽高是固定的,绝对p定位在50%,然后按margin调整位置,浏览器兼容性好

.parent{position:relative;}.child{宽度:100px;高度:100px;位置:绝对;左:50%;顶部:50%;margin:-50px00-50px;}或者.child{width:100px;高度:100px;位置:绝对;左:0;顶部:0;右:0;机器人汤姆:0;margin:auto;}元素的宽高未知.parent{position:relative;}.child{width:100px;高度:100px;位置:绝对;左:50%;顶部:50%;/*边距:-50px00-50px;*/transform:translate(-50%,-50%);}强大的flex布局结合margin.parent{display:flex;div{边距:自动;}}