zoukankan html css js c++ java

CSS盒子水平垂直的几种方案

方案一：定位+margin

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #bigBox{
              width: 400px;
              height: 400px;
              background: gray;
              position: relative;
            }
            #smallBox{
              width: 100px;
              height: 100px;
              background: red;
              position: absolute;
              left: 50%;
              top: 50%;
              margin-left: -50px;
              margin-top: -50px;
            }
        </style>
    </head>
    <body>
      <div id='bigBox'>
        <div id='smallBox'></div>
      </div>
    </body>
</html>

方案二：定位+transform

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #bigBox{
              width: 400px;
              height: 400px;
              background: gray;
              position: relative;
            }
            #smallBox{
              width: 100px;
              height: 100px;
              background: red;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%,-50%);
            }
        </style>
    </head>
    <body>
      <div id='bigBox'>
        <div id='smallBox'></div>
      </div>
    </body>
</html>

方案三：定位+margin:auto

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #bigBox{
              width: 400px;
              height: 400px;
              background: gray;
              position: relative;
            }
            #smallBox{
              width: 100px;
              height: 100px;
              background: red;
              position: absolute;
              left: 0;
              top: 0;
              right: 0;
              bottom: 0;
              margin: auto;
            }
        </style>
    </head>
    <body>
      <div id='bigBox'>
        <div id='smallBox'></div>
      </div>
    </body>
</html>

方案四：display:flex

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #bigBox{
              width: 400px;
              height: 400px;
              background: gray;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            #smallBox{
              width: 100px;
              height: 100px;
              background: red;
            }
        </style>
    </head>
    <body>
      <div id='bigBox'>
        <div id='smallBox'></div>
      </div>
    </body>
</html>

方案5：display:table-cell

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #bigBox{
              width: 400px;
              height: 400px;
              background: gray;
              display: table-cell;
              text-align: center;
              vertical-align: middle;
            }
            #smallBox{
              width: 100px;
              height: 100px;
              background: red;
              display: inline-block;
            }
        </style>
    </head>
    <body>
      <div id='bigBox'>
        <div id='smallBox'></div>
      </div>
    </body>
</html>

查看全文

相关阅读:
【OpenGL】Shader实例分析（七）- 雪花飘落效果
 BZOJ 1091([SCOI2003]分割多边形-分割直线)
Protocol buffer序列化及其在微信蓝牙协议中的应用
 运行计划中cost计算方法
 jquery全局变量---同步请求设置
 Java split字符串中包含.的情况
 jQuery获取、设置title的值
 jQuery获取URL中所带参数的办法
 在Eclipse中提交SVN项目的时候注意提交项目信息
 马丁福勒 Martin Fowler 关于依赖注入和反转控制的区别

原文地址：https://www.cnblogs.com/MaShuai666/p/13171460.html