zoukankan      html  css  js  c++  java
  • 关于css垂直水平居中的几种方法

    第一种, 针对内联元素居中.

    <div class="box box1">
        <span class="test">垂直居中</span>
    </div>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border:1px solid red;
        }
        .box1{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .test{
            width: 30px;
            height: 30px;
            border:1px solid black;
        }
    </style>

    2: 弹性盒子

    <div class="box box1">
        <div class="test"></div>
    </div>
    <style>
        .box{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            border:1px solid red;
        }
        .test{
            width: 30px;
            height: 30px;
            border:1px solid black;
        }
    </style>

    3translate

    <div class="box box1">
        <div class="test"></div>
    </div>
    <style>
        .box{
            position: relative;
            width: 200px;
            height: 200px;
            border:1px solid red;
        }
        .test{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 30px;
            height: 30px;
            border:1px solid black;
        }
    </style>
  • 相关阅读:
    电源积累
    电感的分类及作用
    电容退耦原理分享
    电容选型
    上拉电阻
    LVTTL与LVCMOS区别
    可重入函数与不可重入函数
    永不改变的PCB设计黄金法则
    os_cpu_a.asm
    [原创]Getting Started with Skywalking
  • 原文地址:https://www.cnblogs.com/joesbell/p/5939441.html
Copyright © 2011-2022 走看看