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

CSS-水平居中、垂直居中、水平垂直居中

时间:2023-04-02 16:30:40 HTML

1.水平居中。水平居中分为行内元素水平居中和块级元素水平居中。超链接等,只要给父元素设置text-align:center就可以实现。.center{text-align:center;}horizo??ntallycentered

1.2Block-levelelementsarehorizo??ntallycenteredFixed-widthblock-levelelementsarehorizo??ntallycentered只需在块中添加margin:0需要auto居中的-level元素是可以的,但是这里需要注意的是block元素的width值必须有.center{width:200px;保证金:0自动;边框:1px纯红色;}horizo??ntalCentering
Indefinitewidth块级元素无限水平居中,即块级元素的宽度不固定。方法一:设置table是通过设置display:table来实现居中显示的元素,然后设置margin:0auto.center{display:table;保证金:0自动;边框:1px纯红色;}水平居中
方法二:设置inline-block(多块元素)子元素设置inline-block,父元素设置text-align:center.center{text-align:中心;}.inlineblock-div{显示:内联块;}1
2方法三:设置flex布局,只需要将待处理的块元素的父元素设置为display:flex,justify-content:center;.center{显示:flex;证明内容:居中;}<divclass="flex-div">12方法四:位置+负边距;方式五:仓位+保证金:auto;方法六:位置+变换;注:这里的方法4、5、6和下面的垂直居中一样,只是top/bottom需要改成left/right,垂直居中部分会详细介绍2.垂直居中2.1单行通过设置paddingtop=paddingbottom使文本垂直居中;或者设置行高=高度;2.2多行文本垂直居中通过设置父元素table、子元素table-cell和vertical-alignvertical-align:middle表示将元素置于父元素的中间2.3块级元素垂直居中方法一:flexlayout在需要垂直居中的父元素上,设置display:flex和align-items:center要求:父元素必须显示设置高度值显示效果:方法二:使用position和topandnegativemargin(需要知道宽高)1.设置元素为absolute/relative/fixed2,margin=negativehalf效果如下:方法三:使用position和top/bottom和margin:auto(注意不是margin:0auto)1.position:absolute/relative/fixed2,top/bottom:03,margin:auto效果如下:方法四:使用position和top和transformtransform中translateoffset的百分比是相对于元素本身的大小。效果如下:注:上面提到的块级垂直居中方式稍加修改就可以变成块级水平居中方式,比如把top/bottom换成left/righttransform方式,就可以使用了用于居中未知元素大小3.水平和垂直居中方法1:绝对定位+margin:autodiv{width:200px;高度:200px;背景:绿色;位置:绝对;左:0;顶部:0;底部:0;右:0;保证金:自动;}方法二:绝对定位+负边距div{width:200px;高度:200px;背景:绿色;位置:绝对;左:50%;顶部:50%;左边距:-100px;边距顶部:-100px;}方法三:绝对定位+transformdiv{width:200px;高度:200px;背景:绿色;位置:绝对;左:50%;/*父级的50%位置*/top:50%;变换:翻译(-50%,-50%);/*拥有50%*/}方法四:flexlayout.box{height:600px;显示:弹性;证明内容:居中;//子元素水平居中align-items:center;//子元素垂直居中/*aa只需要三句就可以实现可变宽高水平垂直直线居中*/}.box>div{background:green;宽度:200px;高度:200px;}方法五:table-cell实现居中显示:table-cell;文本对齐:居中;垂直对齐:居中;