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

时间：2020-06-21 10:58:37 阅读：79 评论：0 收藏：0 [点我收藏+]

技术分享图片

方案一：定位+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>

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

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)