• css设置垂直居中方式总结


    方式1:flex布局,display:flex;align-items:center

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title></title>
        <style type="text/css">
            *{padding:0;margin:0;}
            .box{width:100px;height:100px;border:1px solid #ddd;display:flex;align-items:center;}
            .inner{width:40px;height:40px;background:red;}
        </style>
    </head>
    <body>
    <div class="box">
       <div class="inner"></div>
    </div>
    </body>
    </html>

    效果如下:

     方式2:position+margin

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title></title>
        <style type="text/css">
            *{padding:0;margin:0;}
            .box{width:100px;height:100px;border:1px solid #ddd;position:relative;}
            .inner{width:40px;height:40px;background:red;position:absolute;top:50%;margin-top:-20px;}
        </style>
    </head>
    <body>
    <div class="box">
       <div class="inner"></div>
    </div>
    </body>
    </html>

    效果图:与上面一样

    方式3:如果不知道具体高度,通过position+transform

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title></title>
        <style type="text/css">
            *{padding:0;margin:0;}
            .box{width:100px;height:100px;border:1px solid #ddd;position:relative;}
            .inner{background:red;position:absolute;top:50%;transform:translateY(-50%);}
        </style>
    </head>
    <body>
    <div class="box">
       <div class="inner">545454</div>
    </div>
    </body>
    </html>

    效果图:

    方式4:display:table-cell+vertical-align:middle

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title></title>
        <style type="text/css">
            *{padding:0;margin:0;}
            .box{width:100px;height:100px;border:1px solid #ddd;display:table-cell;vertical-align:middle;}
            .inner{background:red;}
        </style>
    </head>
    <body>
    <div class="box">
       <div class="inner">545454</div>
    </div>
    </body>
    </html>

     效果图:

    方式5:box布局,box-orient控制子元素是水平分布还是垂直分布,box-align让子元素垂直居中,box-pack让子元素水平居中

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title></title>
        <style type="text/css">
            *{padding:0;margin:0;}
            .box{width:100px;height:100px;border:1px solid #ddd;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-pack:center;-webkit-box-align:center;}
            .inner{background:red;height:20px;}
        </style>
    </head>
    <body>
    <div class="box">
       <div class="inner">54</div>
       <div class="inner">33</div>
    </div>
    </body>
    </html>

    效果图:

  • 相关阅读:
    [算法]最长的可整合数组的长度
    [算法]在行列都排好序的矩阵中找数
    [算法]在数组中找到出现次数大于N/K的数
    [算法]需要排序的最短子数组长度
    [算法]找到无序数组中最小的K个数
    [算法]“之”字形打印矩阵
    [java]final关键字、finally关键字与finalize()方法
    [算法]旋转矩阵问题(Spiral Matrix)
    [算法]位运算问题之三(实现加减乘除)
    [IDE]Intellij Idea学习整理
  • 原文地址:https://www.cnblogs.com/hesj/p/10523635.html
Copyright © 2020-2023  润新知