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>

相关阅读:
Vue.js笔记
 WebPack笔记
 Js笔记（对象，构造函数，原型，原型链，继承）及一些不熟悉的语法
 JS在严格模式和非严格模式的区别
 原生js实现ajax与jquery的ajax库，及json
原生js实现一个简单的轮播图
 HTML load事件和DOMCOntentLoaded事件
 HTML <script> 标签的 defer 和 async 属性
 网站favicon图标的显示问题
 python 取出aws中ip有，zabbix中没有的ip
原文地址：https://www.cnblogs.com/MaShuai666/p/13171460.html