欢迎光临散文网 会员登陆 & 注册

CSS中关于元素居中的方法总结(超全)

2022-11-15 16:15 作者:doubleyong  | 我要投稿

css中一个很重要的问题,就是关于元素的居中,包括水平居中,垂直居中,本文就是为大家总结了:css中对于行内元素与块级元素不同的居中方法.




一、行内元素


水平居中:



垂直居中:

1. 单行文本

height 与line-height 的高度相同时,可以实现垂直居中



2. 多行文本

方法1:


注:vertical-align 作用单元格时,才生效,所以一般会结合dispaly:table-cell;

 一起使用才有效果



示例:



方法2:



样式重点分析:

1. 父级的标签,高度和行高一致

p{

   height: 200px;

   line-height: 200px;

  border: 1px solid red;

   font-size: 16px;

}


2. 子标签, 设置为行内块级元素,垂直居中,且单独设置行高

注:line-hight:1 ; 这里的1指与父级的字体大小相同,你可以可以直接写具体的px

p span{

       display: inline-block;

       line-height: 1;

}



二、块级元素


1. 水平居中

方法1:常规方法 - 定宽元素

    此方法缺点:内层元素必须设定(固定)宽度




    方法2:不定宽元素 - 绝对定位

    思路:

    1.外层绝对定位,内层相对定位,外层的外层相对定位 

    2.外层左浮动,内层左浮动

    3.外层右移50%,内层左移50%


    此方法有left:50%, 在margin-left:负的宽度的一半,只是宽度不确定,所以就采用了position:relative; , right:50%; 而right:50%,其实就是向左移动宽度的一半,这里的百分比是以父级的宽度计算的



    2. 垂直居中


    方法1:

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



    代码如下:



    方法2:

    和上一种方法原理差不多,都是利用相对定位和绝对定位,有点不同是子元素内加上了transform:translateY(-50%);



    方法3:


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



    总结


    还可以通过flex来实现,水平居中和垂直,因为比较简单本文就没有介绍.



    参考文章:

    https://www.cnblogs.com/goloving/p/7657544.html

    https://blog.csdn.net/zhang_yu_ling/article/details/90272623

    https://blog.csdn.net/Simon9124/article/details/78935788



    苟有恒 , 何必三更眠五更起

    关注我,一起学习吧 


    CSS中关于元素居中的方法总结(超全)的评论 (共 条)

    分享到微博请遵守国家法律