• 前端面试题:CSS实现水平垂直居中


    这是一个挺常见的前端面试题,但是没有做过总结。有的时候可能会使用完了,很长一段时间不去使用,会慢慢忘记。所以,温故而知新,还是很有必要的。

    一、绝对定位元素的居中实现

    这一种工作中用的应该是最多的,兼容性也是很好。

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>绝对定位元素的居中实现margin</title>
     8     <style>
     9         .center-vertical{
    10             width: 100px;
    11             height: 100px;
    12             background: orange;
    13             position: absolute;
    14             top: 50%;
    15             left: 50%;
    16             margin-top: -50px; /*高度的一半*/
    17             margin-left: -50px; /宽度的一半*/
    18         }
    19     </style>
    20 </head>
    21 <body>
    22     <div class="center-vertical"></div>
    23 </body>
    24 </html>

    效果:

    缺点:需要提前知道元素的尺寸。如果不知道元素尺寸,这个时候就需要JS获取了。

    CSS3.0的兴起,使这个问题有了更好的解决方法,就是使用 transform 代替 margin 。

    transform 中 translate 偏移的百分比是相对于自身大小而说的。

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>未知宽高的元素水平垂直居中transform</title>
     8     <style>
     9     .content{
    10         background: orange;
    11         position: absolute;
    12         top: 50%;
    13         left: 50%;
    14         transform: translate( -50%, -50%);
    15     }
    16     </style>
    17 </head>
    18 <body>
    19     <div class="content">你复合1233肥反反复复</div>
    20 </body>
    21 </html>

    效果:

    优点:无论绝对定位元素的尺寸是多少,它都是水平垂直居中显示的。

    缺点:就是兼容性问题。

     二、margin: auto;实现绝对定位元素的居中

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>margin:auto实现绝对定位元素的居中</title>
     8     <style>
     9     .center-vertical{
    10         width: 100px;
    11         height: 100px;
    12         background: orange;
    13         position: absolute;
    14         top: 0;
    15         left: 0;
    16         right: 0;
    17         bottom: 0;
    18         margin: auto;
    19     }
    20     </style>
    21 </head>
    22 <body>
    23     <div class="center-vertical"></div>
    24 </body>
    25 </html>

    效果:

    注意:

    上下左右均为 0 位置绝对定位。

    margin: auto;

    三、CSS3.0弹性布局

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>水平垂直居中==弹性布局</title>
     8     <style>
     9     html,body{
    10         width: 100%;
    11         height: 100%;
    12         margin: 0;
    13         padding: 0;
    14     }
    15     body{
    16         display: flex;
    17         align-items: center;/*定义body的元素垂直居中*/
    18         justify-content: center;/*定义body的元素水平居中*/
    19     }
    20     .content{
    21         width: 300px;
    22         height: 300px;
    23         background: orange;
    24     }
    25     </style>
    26 </head>
    27 <body>
    28     <div class="content"></div>
    29 </body>
    30 </html>

    效果:

     四、vertical-align:middle;垂直方向居中

    verical-align 定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

    允许指定负长度值和百分比值。这会是元素降低而不是升高。

    在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>vertical-align:middle;</title>
     8     <style>
     9     .big-box{
    10         width: 500px;
    11         height: 400px;
    12         background: green;
    13         text-align: center;
    14     }
    15     .box{
    16         line-height: 400px;
    17     }
    18     img{
    19         vertical-align: middle;
    20     }
    21     </style>
    22 </head>
    23 <body>
    24     <div class="big-box">
    25         <span class="box">
    26             <img src="ermao.jpg"/>
    27         </span>
    28     </div>
    29 </body>
    30 </html>

    效果:

    五、display:table实现

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>display: table-cell;</title>
     8     <style>
     9     .parent{
    10         width: 300px;
    11         height: 300px;
    12         background: orange;
    13         text-align: center;
    14         display: table;
    15     }
    16     .son{
    17         display: table-cell;
    18         background-color: yellow;
    19         vertical-align: middle;
    20     }
    21     </style>
    22 </head>
    23 <body>
    24     <div class="parent">
    25         <div class="son">nihaosssss</div>
    26     </div>
    27 </body>
    28 </html>

    效果:

    六、相对定位

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>实现水平垂直居中==相对定位实现</title>
     8     <style>
     9     html,body{
    10         width: 100%;
    11         height: 100%;
    12         margin: 0;
    13         padding: 0;
    14     }
    15     .content{
    16         width: 300px;
    17         height: 300px;
    18         background: orange;
    19         margin: 0 auto;/*水平居中*/
    20         position: relative;/*设置position*/
    21         top: 50%; /*偏移*/
    22         /*margin-top: -150px;*/    /*第一种:margin-top*/
    23         transform: translateY(-50%);/*第二种:transform:转换*/
    24     }
    25     </style>
    26 </head>
    27 <body>
    28     <div class="content"></div>
    29 </body>
    30 </html>

    效果:

  • 相关阅读:
    数论分块与整除相
    P3254——DP&&入门
    P3384——树链剖分&&模板
    树链剖分模板
    P4145——线段树点修改&&模板题
    P1198最大数——线段树点修改&&模板题
    线段树(四)——两个标记(add和set)
    epoll 知识总结
    C++中的mutable关键字
    [LeetCode] Max Points on a Line
  • 原文地址:https://www.cnblogs.com/liubeimeng/p/11182613.html
Copyright © 2020-2023  润新知