元素垂直水平居中的三种方法

方法一：利用绝对定位

        使用条件：

        （1）、明确宽高的子元素；

        （2）、使用绝对定位，且四个方向的数值都为1；

        （3）、子元素可以使用margin:auto;就实现在父元素中的水平垂直方向居中。

position:absolute;

top:0;

button:0;

left:0;

right:0;

margin:auto;

方法二：利用弹性布局

        利用弹性布局给该元素的父元素设置：

Box{

        display:flex;

        flex-deriction:row/column;

        justify-content:center;

        align-item:center;

}

方法三：利用position和transform实现

 


   
   
   
   
   


   
       
   

方法三的最终效果： 

 关于父级设置相对定位：如果父级标签不开启定位的话，那么子级标签将会以body标签进行定位，如果父级标签开启了定位，那么子级标签将会相对于父级进行定位，代码可以把宽度改小，就能看见一样垂直水平的效果。(子绝父相)

若是不写transform: translate(-50%,-50%)；最终效果图如下：

向左向上移动50%，是以子元素child的左上角来看，没有把子元素自身的宽高算进去，所以还要通过位移函数transform：translate（）来使子元素移动至水平垂直居中（即以子元素中心点为准，子元素中心的位于父元素的水平垂直居中位置。）

补充：

        文本和图片水平居中：  text-align: center;   

        文本垂直居中：  line-height:当行行高（像素值） ;       

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！