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>

     

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

     

     

     

     

  • 相关阅读:
    Unity3d之UGUI- Image拦截Button响应事件
    hdu1114Piggy-Bank(完全背包)
    cf455A boredom
    hdu2084数塔(入门级dp)
    小米线刷出现remote: partition table doesn't exist
    km算法
    hdu1069 Girls and Boys
    CF1203C Common Divisors
    魔法部落
    java命令行运行出现找不到或无法加载类
  • 原文地址:https://www.cnblogs.com/sunweinan/p/6024697.html
Copyright © 2011-2022 走看看