实现元素水平垂直局中的多种方案

Kratial

已于 2023-11-24 15:29:32 修改

阅读量164

点赞数

分类专栏： CSS 文章标签： css css3 前端

于 2020-11-02 15:41:13 首次发布

本文链接：https://blog.csdn.net/Kratial/article/details/109449533

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

（1）第一类是借助于定位实现元素的局中
1.方式一：

<style>
        .wrap{
            position:absolute;// position:fixed;
            top:0;
            bottom:0;
            left:0;
            right:0;
            margin:auto;
            width:300px;
            height:300px;
            background:greenyellow;
        }
 </style>

<body>
    <div class="wrap"></div>
</body>

2.方式二：

<style>
        .wrap{
            position:absolute;
            top:50%;
            left:50%;
            width:300px;
            height:300px;
            transform: translate(-50%,-50%);
            background:pink;
        }
 </style>
 <body>
    <div class="wrap"></div>
</body>

（2）第二类是将元素转换成行内或者行内块状的元素，从而实现元素的局中
1.方式一：

<style>
        .wrap{
            width:800px;
            height:500px;
            margin:auto;
            background:yellow;
            text-align:center;
            display: table-cell;
            vertical-align: middle;
        }
        .inner{
            display:inline-block;
            width:300px;
            height:300px;
            background:purple;
        }
</style>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>

2.方式二

<style>
        .wrap{
            width:800px;
            height:500px;
            margin:auto;
            background:orange;
            text-align:center;
            line-height:500px;
           
        }
        .inner{
            display: inline;
            background:purple;
        }
</style>
<body>
    <div class="wrap">
        <div class="inner">888</div>
    </div>
</body>

3.方式三：利用vertical-align:middle设置垂直居中（vertial-align生效的前提是该元素为行内或行内块状元素），其次设置父元素的行高为它自身的高度。

<style>
   .wrap{
       background-color: blue;
       width: 100vw;
       height: 100vh;
       line-height: 100vh;
       text-align: center;
       
   }
   .inner{
       background-color: aqua;
       width: 200px;
       height: 200px;
       display: inline-block;
       vertical-align: middle;
   }
</style>

<div class="wrap">
      <div class="inner"></div>
</div>

（3）第三类是借助于flex布局实现元素的局中
1.方式一：

<style>
        .wrap{
            width:800px;
            height:500px;
            margin:auto;
            background:gray;
             display:flex;
             align-items: center;
             justify-content: center;
           
        }
        .inner{
            width:300px;
            height:300px;
            background:purple;
        }
</style>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>