css实现水平垂直居中的七种方式

勉灬之

已于 2022-08-23 11:52:12 修改

阅读量1.4k

点赞数 8

文章标签： css css3 html

于 2022-08-22 21:01:08 首次发布

本文链接：https://blog.csdn.net/qq_39410252/article/details/126473097

版权

css实现水平垂直居中的七种方式

一、使用grid布局
二、使用flex布局
三、使用定位+外边距
四、使用定位+平移
五、使用外边距 + 平移
六、使用文本对齐 + 行高
七、使用表格单元

一、使用grid布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>test</title>
    <style>
      #outside {
        width: 200px;
        height: 200px;
        background: #000;
        display: grid;
        place-items: center;
        /* place-items等于justify-items:center; +  align-items:center;*/
      }
      #inside {
        width: 50px;
        height: 50px;
        background: #96f2d7;
      }
    </style>
  </head>
  <body>
    <div id="outside">
      <div id="inside"></div>
    </div>
  </body>
</html>

在这里插入图片描述

二、使用flex布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>test</title>
    <style>
      #outside {
        width: 400px;
        height: 400px;
        background: #000;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      #inside {
        width: 100px;
        height: 100px;
        background: #ffc9c9;
      }
    </style>
  </head>
  <body>
    <div id="outside">
      <div id="inside"></div>
    </div>
  </body>
</html>

在这里插入图片描述

三、使用定位+外边距

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>test</title>
    <style>
      #outside {
        width: 300px;
        height: 300px;
        background: #000;
        position: relative;
      }
      #inside {
        width: 100px;
        height: 100px;
        background: #eebefa;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div id="outside">
      <div id="inside"></div>
    </div>
  </body>
</html>

在这里插入图片描述

四、使用定位+平移

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>test</title>
    <style>
      #outside {
        width: 200px;
        height: 200px;
        background: #000;
        position: relative;
      }
      #inside {
        width: 50px;
        height: 50px;
        background: #a5d8ff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div id="outside">
      <div id="inside"></div>
    </div>
  </body>
</html>

在这里插入图片描述

五、使用外边距 + 平移

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>test</title>
    <style>
      #outside {
        width: 200px;
        height: 200px;
        background: #000;
        overflow: hidden;
        /* overflow: hidden;是为了防止父子元素的margin-top重合 */
      }
      #inside {
        width: 50px;
        height: 50px;
        background: #ffffb8;
        margin: 50% auto;
        transform: translateY(-50%);
      }
    </style>
  </head>
  <body>
    <div id="outside">
      <div id="inside"></div>
    </div>
  </body>
</html>

在这里插入图片描述

六、使用文本对齐 + 行高

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>test</title>
    <style>
      #outside {
        width: 200px;
        height: 200px;
        background: #000;
        text-align: center;
        line-height: 200px;
        vertical-align: middle;
      }
      #inside {
        color: #e9ecef;
        display: inline;
      }
    </style>
  </head>
  <body>
    <div id="outside">
      <div id="inside">只适用于行内元素</div>
    </div>
  </body>
</html>

在这里插入图片描述

七、使用表格单元

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>test</title>
    <style>
      #outside {
        width: 200px;
        height: 200px;
        background: #000;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
      }
      #inside {
        color: #ffdeeb;
      }
    </style>
  </head>
  <body>
    <div id="outside">
      <div id="inside">只适用于行内元素</div>
    </div>
  </body>
</html>