zoukankan      html  css  js  c++  java
  • 盒子居中的几种方法

    <!DOCTYPE html>
    <html lang="zh">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    </head>
    <style type="text/css">
    *{
    margin:0;
    padding:0;
    list-style: none;
    }
    .box{
    height: 400px;
    400px;
    border: #000000 1px solid;
    background-color: aqua;
    box-sizing: border-box;
    /* 第八种 */


    /* 第一种方法
    display: flex;
    justify-content: center;
    align-items: center; */

    position: relative;
    margin:100px auto;
    }
    .box .inbox{
    height: 100px;
    display: inline-block;
    100px;
    border: 1px solid #C81623;
    box-sizing: border-box;
    background-color: #C81623;

    position: absolute;
    /* 第二种 */
    /* left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top:-50px; */

    /* 第三种 */
    /* left:200px;
    top:200px;
    margin-top: -50px;
    margin-left: -50px; */

    /* 第四种 */
    /* left: 50%;
    top: 50%;
    transform: translate(-50px,-50px); */

    /* 第五种 */
    /* left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); */

    /* di六种 */
    /* left:200px;
    top:200px;
    transform: translate(-50%,-50%); */

    /* 第七种 */
    /* left: 0;
    top:0;
    right: 0;
    bottom: 0;
    margin: auto; */






    }
    /* 8种 */
    .one{
    200px;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
    background-color: #00FFFF;
    text-align: center;
    }


    </style>
    <body>
    <!-- <div class="box">
    <div class="inbox"></div>
    </div> -->

    <div class="one">
    <span>中华人民共和国</span>
    </div>
    </body>
    </html>

  • 相关阅读:
    人类思考的基本形式
    晚上睡不者原因
    东西方哲学比较
    逻辑推理的三种方法
    锻炼自己的注意力和逻辑思维能力
    预测和复盘自己的投资策略
    概念:名与实
    没有“界定问题”会出现什么问题
    问题、联系-条条大路通罗马
    程序问题调试与医生、汽车维修师
  • 原文地址:https://www.cnblogs.com/lxsunny/p/12717930.html
Copyright © 2011-2022 走看看