元素居中的几种方法

Posted 2021-03-21 xiaomi0610

元素居中的几种方法：

①　块级元素margin:0 auto;

针对嵌套的盒子元素，子元素在父元素中居中，只在水平方向上有效，浮动流排版中不可用

②　内联元素text-align:center;

对块级元素设置此属性，使得盒子内的内联元素居中，一般包括文字/图片等

③　背景background-position:center top;

主要实现背景图片的居中

④　文字行内垂直居中

一行文字垂直居中：文字行高line-height的值与盒子的高度一致

多行文字垂直居中：文字内边距设置padding: (height-行高*行数)/2;box-sizing:border-box;

⑤ 绝对定位水平居中：绝对定位元素的left:50%; 然后设置绝对定位元素的margin-left:-元素宽度的一半

但在企业开发中，推荐使用以下方法让元素居中：(不需要清楚元素的宽度)

水平居中：left: 50%; transform:translateX(-50%);

垂直居中：top:50%; transform:translateY(-50%);

⑥　当图片元素尺寸大于父元素

text-align:center与margin:0 auto;不会使图片居中，可以：图片设置属性margin:0 -100%; 并且父元素设置text-align:center;

⑦　弹性布局方式

主轴对齐方式：justify-content:flex-start/flex-end/center/space-between/space-around;

侧轴对其方式：align-items:flex-start/flex-end/center/baseline/stretch(伸缩项不能设置高度，否则拉伸失效)