zoukankan      html  css  js  c++  java
  • css中关于居中的问题

    居中是最常用的一种css格式,不同的居中方法适和不同的环境中,下面总结了几种常用的居中方法,你可以不用它,但是无论你是一个资深前端大牛,还是小小初学者,当你见到它的时候不认识它就是你的不对啦!!!

    html部分

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8" />

    <title></title>

    </head>

    <body>

    <div id="box">

    <div id="son"> </div>

    </div>

    </body>

    </html>

     

    css部分

    第一种(是个程序员就认识的):

    <style type="text/css">

    *{margin: 0;padding: 0;}

    #box{

    width: 200px;

    height: 200px;

    background: red;

    }

    #son{

    width: 100px;

    height: 100px;

    background: green;

    margin: 50px; /*算好尺寸设置(最蠢也是最简单的)*/

    }

    </style>

     

    第二种:

    <style type="text/css">

    *{margin: 0;padding: 0;}

    #box{

    width: 200px;

    height: 200px;

    background: red;

    position: relative;

    }

    #son{

    width: 100px;

    height: 100px;

    background: green;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    margin: auto;

    }

    </style>

    第三种:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8" />

    <title></title>

    <style type="text/css">

    *{margin: 0;padding: 0;}

    #box{

    float: left;

    position: relative;

    left: 50%;

    }

    p{

    float: left;

    position: relative;

    right: 50%;

    }

    </style>

    </head>

    <body>

    <div id="box">

    <p>我是浮动的</p>

    <p>我也是居中的</p>

    </div>

    </body>

    </html>

     

    以上几种是在工作中遇到的几种居中情况,欢迎大家补充!!!

     

     

     

     

  • 相关阅读:
    ArrayList removeRange方法分析
    LinkedHashMap源码分析(基于JDK1.6)
    LinkedList原码分析(基于JDK1.6)
    TreeMap源码分析——深入分析(基于JDK1.6)
    51NOD 2072 装箱问题 背包问题 01 背包 DP 动态规划
    51 NOD 1049 最大子段和 动态规划 模板 板子 DP
    51NOD 1006 最长公共子序列 Lcs 动态规划 DP 模板题 板子
    8月20日 训练日记
    CodeForces
    CodeForces
  • 原文地址:https://www.cnblogs.com/sunweinan/p/6024697.html
Copyright © 2011-2022 走看看