将一个块级元素水平居中有几种方法?分别是什么?

水平居中:利用选择器选择到该元素,

     1.添加属性 margin:auto;

     2.设置父元素相对定位,子元素position: absolute;left:50% ;同时margin-left值为-(子元素宽度的一半),因为设置top值时是相对于盒子左部,所以想要居中还要往上移动半个盒子的宽度度才能实现;

     3.父级元素添加display:flex;justify-contet:center;

垂直居中:1.父级元素添加display:flex; aiign-items:center;

     2.设置父元素相对定位,子元素position: absolute;top: 50%;同时margin-top值为-(子元素高度的一半),因为设置top值时是相对于盒子顶部,所以想要居中还要往上移动半个盒子的高度才能实现。

     3.这种方法和第一种差不多,在父容器中设置display:flex;子元素设置align-self: center;

     4.在父容器中再加上一个子元素,把它的高度设为去掉盒子高度后的一半,实际上就是设置了一个隐藏块元素,把实际上显示的块元素“挤”到垂直居中的位置;

     5. 设置父元素为相对定位,子元素为绝对定位,同时设置子元素的top,bottom,left,right值为0,最后设置margin:auto;这能实现块元素的垂直+水平居中

     6. 设置父容器为display: table-cell;vertical-align: middle;

猜你喜欢

转载自www.cnblogs.com/hudingbiao/p/12078156.html