CSS——垂直水平居中

[Σ'αγαπώ.]

前言

在前端布局中,垂直水平居中是指将一个元素子在父元素容器内裤即在垂直方向上也在水平方向上居中对齐,这是一种常见的布局需求,尤其是在,对话框,模态窗口卡牌布局等需要精确的将内容放在页面中央的布局。
实现垂直水平剧中的方法有很多，本篇文章让我们一起学习一下如何让一个盒子垂直水平居中，

方法一（使用Flex布局）

使用方法

css部分
   html,body {
            margin: 0;
            padding :0;
        }
        .box {
            width: 100vw ;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ccc;
        }  
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #f90;
        }
    html部分
    <div class="box">
        <div class="box1"></div>
    </div>
    

在想要让垂直水平居中盒子的父级使用弹性盒子布局,
使用 justify-content属性(justify-content属性定义了项目在主轴上的对齐方式。)和align-items属性(align-items属性定义项目在交叉轴上如何对齐。),属性值为center;
就可实现盒子的垂直水平居中了

注意: 父盒子需要设置宽高,如果是浏览器视口宽高,父盒子设置宽高,不设置宽高,弹性盒子布局无法生效,

    width:100vw;
    height:100vh;

方法二(定位)

使用方法

 .box {
            width: 100vw ;
            height: 100vh;
            position: relative;
            background-color: #ccc;
        }  
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #f90;
            position: absolute;
            top: 0;
            right:0;
            bottom:0;
            left: 0;
            margin:auto;
        }

使用定位.通过父相子绝,给父元素设置相对定位,给子元素设置绝对定位,让子盒子距离父盒子上右下左的距离为0,十周使用maigin属性,属性值为auto
就可以实现子盒子垂直水平居中了,

方法三(定位)

使用方法

已知被垂直水平居中盒子的宽高

    .box {
         width: 100vw ;
         height: 100vh;
         position: relative;
         background-color: #ccc;
     }  
     .box1 {
         width: 200px;
         height: 200px;
         background-color: #f90;
         position: absolute;
         top: 50%;
         left:50%;
         margin: -100px 0 0 -100px;/* 外边距符合写法 */
     }

使用定位,通过父相子绝,给父元素设置相对定位,子元素设置绝对定位,子盒子距离父元素顶部和左侧各50%,之后使用margin外边距属性,返回自身宽高一半的距离,就可以实现垂直水平居中了

margin-top:-100px;
margin-left:-100px;

注意,如果绝对定位时距离顶部和左侧50%距离,相对应,外边距需要选择距离顶部和左侧,
定位,相对应方向不可一起使用,
如:一起使用top和bottom,则只会top生效,bottom不生效.对应,一起使用left和right.则只有left生效,right不生效,
top,right,bottom,left,四个值相等即可,不一定要都是0

方法四(定位)

使用方法

未知被垂直水平居中元素的宽高

  .box {
            width: 100vw ;
            height: 100vh;
            position: relative;
            background-color: #ccc;
        }  
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #f90;
            position: absolute;
            top: 50%;
            left:50%;
           transform: translate(-50% ,-50%);/* transform的复合用法*/
        }

同样, 使用定位,通过父相子绝,给父元素设置相对定位,子元素设置绝对定位,子盒子距离父元素顶部和左侧各50%,之后使用transform属性,使用translate属性值位移自身宽高的-50%的距离就可以实现处置水平居中了

注意: transform: translate(-50% ,-50%);第一个值位移的是x轴,向左移动自身宽度的-50%距离,第二个值是位移y轴,向上移动自身高度的-50%距离,两个值之间用逗号隔开,否则transform属性不生效

文本垂直水平居中

使用方法

css部分
 .box {
          width: 200px;
          height: 100px;
        border: 1px solid red;
        margin: 100px auto;
        text-align: center;
        line-height: 100px;
        }  
html部分
    <div class="box">
        <span>最编程</span>
    </div>

文本垂直水平居中可以使用text-align:center;文本水平居中,之后设置行高就可以了
注意:使用这种方法,须知父元素盒子的高度,行高与父元素盒子高度相同
除去这种方法,上面讲解的垂直水平居中的方法也可以实现文本的处置水平居中,

总结

垂直水平居中的方法有很多,小编这里知识讲解了小编在编写页面中常用的几种方法,方法虽然由于很多,但是我们在编写页面时,要根据页面的实际情况来选取最合适的方法来实现垂直水平居中。
关于本篇文章,如果有错误或者是建议,请在评论区留言小编,小编这里会及时更修改,有其他更好的垂直水平居中方法也请留言小编,小编也会继续学习努力。