css多种居中方式

最新推荐文章于 2022-07-12 22:43:06 发布

hyq_h

最新推荐文章于 2022-07-12 22:43:06 发布

阅读量158

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_45613604/article/details/103785077

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

位移居中 :

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%); // 兼容

/* 垂直居中 */
left: 50%;
transform: translateX(-50%);

块级元素居中 :

display：block;  /* 必须是块级元素 */
margin: 0 auto;

弹性布局 :

display: flex;
justify-content: center;
align-items: center;

文本居中 :

text-align: center;
display: table-cell;
vertical-align: middle;

/* 垂直居中可以直接设置行高 */
height：40px;
line-heigth:40px;

绝对定位居中 :

    <style>
      .box {
        width: 500px;
        height: 300px;
        margin: auto; /* 有了这个就自动居中了 */
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        border: 1px solid #000;
      }
    </style>
    
  <body>
    <div class="box">水平居中</div>
  </body>