css

最新推荐文章于 2024-08-31 21:49:18 发布

mzrybbd

最新推荐文章于 2024-08-31 21:49:18 发布

阅读量46

点赞数

分类专栏：前端知识梳理文章标签： css

本文链接：https://blog.csdn.net/mzrybbd/article/details/114870319

版权

前端知识梳理专栏收录该内容

1 篇文章 0 订阅

订阅专栏

垂直水平居中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>垂直水平居中</title>
    <style>
      main {
        height: 152px;
        background: purple;
        width: 100%;
      }
      main > span {
        background: #b4a078;
        color: white;
        padding: 0.3em 1em 0.5em;
        border-radius: 3px;
        box-shadow: 0 0 0.5em #b4a078;
      }
    </style>
    <style>
      /* 1. display:flex */

      /* main {
        display: flex;
        justify-content: center;
        align-items: center;
      } */
      /* 1. display:flex + margin:auto 不限定宽高*/
      /* main {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      main > span{
        margin: auto;
      } */
    </style>
    <style>
      /* 2. display:grid */
      /* main {
        display: grid;
        justify-content: center;
        align-items: center;
      } */
    </style>
    <style>
      /*3. relative + absolute定宽高 */
      /* main{
        position: relative;
      }
      main > span {
        position: absolute;
        top : 50%;
        left: 50%;
        margin-top: -16px;
        margin-left: -72px;
      } */
    </style>
    <style>
      /* main {
        position: relative;
      }
      main > span {
        position: absolute;
        top: calc(50% - 16px);
        left: calc(50% - 72px);
      } */
    </style>
    <style>
      /*4. relative + translate 不定宽高 */
      /* main {
        position: relative;
      }
      main > span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      } */
    </style>
    <style>
      /* table + table-cell */
      /* main {
        display: table;
      }
      main > span {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
      } */
    </style>
    <style>
      /* main： min-height  =》 height */
      main {
        text-align: center;
      }
      main::after{
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <main>
      <span>Center me, please!</span>
    </main>
  </body>
</html>

border 1px

参考： https://www.jianshu.com/p/bcae724172a3

mzrybbd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css

垂直水平居中<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>垂直水平居中</title> <style> main {
复制链接

扫一扫

专栏目录