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

浅谈CSS中常用的水平和垂直居中元素方法

时间:2023-03-30 23:13:56 CSS

(1)第一种方法:使用绝对定位+margin(设置position为绝对定位absolute,分别设置left和top为parent元素的50%,设置topmargin和leftmargin为自身高度和宽度的一半,且为负值)position:absolute;左:50%;顶部:50%;顶部边距:-高度/2px;左边距:-宽度/2px;(2)第二种方法:同样使用绝对定位+margin(设置position为绝对定位,设置left,right,top,bottom为零;设置margin为auto自动适应)position:absolute;left:0;右:0;顶部:0;底部:0;保证金:自动;(3)第三种方法:display:inline-block和vertical-align:middle来匹配Elementtext-align:center;父级:文本对齐:居中;child:display:inline-blockvertical-align:middledisplay属性详解vertical-align属性详解(四)第四种方法:使用绝对定位+平移(设置position为绝对定位absolute,将left和top设置为父元素的50%分别设置X轴平移和Y轴平移距离为自身高度和宽度的一半,且值为负)position:absolute;top:50%;左:50%;变换:翻译X(-50%);变换:翻译Y(-50%);什么是变换?(5)第五种方法:这种方法是使用flex布局,在元素css中声明为flex;显示:弹性;证明内容:居中;对齐项目:居中;什么是弹性布局?快点!!!