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

纵横居中

时间:2023-03-30 19:23:54 CSS

纵横居中1,确定宽高1,绝对+负margin.way3{position:relative;}.way3img{width:200px;高度:140px;位置:绝对;左:50%;顶部:50%;左边距:-100px;margin-top:-70px;}2,absolute+marginauto.wp{position:relative;}.box{width:200px;高度:140px;位置:绝对;;顶部:0;左:0;右:0;底部:0;margin:auto;}3.absolute+calc用于动态计算长度值。需要注意的是运算符前后需要保留一个空格,例如:width:calc(100%-10px);可以使用calc()函数计算任何长度值;calc()函数支持“+”、“-”、“*”、“/”操作;calc()函数使用标准的数学运算优先规则;.way6{位置:相对;宽度:250px;高度:250px;}.way6img{宽度:200px;高度:140px;位置:绝对;左:计算(50%-100px);top:calc(50%-70px);}2.不确定宽高1、absolute+transform(x,y).way5{position:relative;宽度:850px;height:850px;}.way5img{position:absolute;左:50%;顶部:50%;transform:translate(-50%,-50%);}2.lineheight123123

.wp{行高:300px;文本对齐:居中;字体大小:0px;}.box{字体大小:16px;显示:内联块;垂直对齐:中间;行高:初始;/*注意*/}3.writing-modewriting-mode:改变文字的显示方向;更神奇的是所有水平方向的css属性,都会变成垂直方向的属性,比如text-align;通过writing-mode和text-align可以实现水平和垂直居中,但是有点麻烦。123123
.wp{书写模式:vertical-lr;text-align:center;}.wp-inner{书写模式:horizo??ntal-tb;显示:内联块;文本对齐:居中;宽度:100%;}.box{显示:内联块;;text-align:left;}4.flex.way{width:850px;高度:850px;显示:弹性;justify-content:center;/*水平居中*/align-items:center;/*垂直居中*/}5.gridcss新的网格布局由于兼容性差,一直没有受到太多关注。也可以通过grid水平和垂直居中123123.wp{display:grid;}.box{align-self:中心;justify-self:center;}6.display:table-cell;123123.wp{display:table-cell;文本对齐:居中;vertical-align:middle;}.box{display:inline-block;}horizo??ntalcenter1,inline元素水平居中text-align:center;------水平居中对inline、inline-block、inline-table和inline-flex元素有效。way{text-align:center;}2.块级元素水平居中margin:0auto------居中的元素必须是块级元素。way2img{显示:块;margin:0auto;}3.可变宽度的浮动元素通过父子容器进行相对定位。注意:要清除浮动,请将浮动添加到外部元素。这里的父元素是外层元素;偏移位移如下图所示:

我是浮动的

我也是居中的

。框{浮动:左;职位:相对;左:50%;}p{浮动:左;职位:相对;右:50%;}