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>

     

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

     

     

     

     

  • 相关阅读:
    jquery map.js
    json序列指定名称
    如何将后台传来的json反序列化为前端具体对象
    创建随机码!!
    用户(三次)登录--作业小编完成
    求出1-2+3-4+5------100求和
    if -else 条件语句原理
    联系:中奖彩票小编译
    求出1-100内所有奇数。
    练习题:求1-100所有数偶数
  • 原文地址:https://www.cnblogs.com/sunweinan/p/6024697.html
Copyright © 2011-2022 走看看