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>

查看全文

相关阅读:
好看的壁纸网站
 python简介
 python学习之基本语法(1)
信息系统开发方法
 数据库连接池的使用小结
 软件版本后的字母含义
 信息系统与信息化
 软考
 实施过程中的项目管理
 mysql查SQL执行速度

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