史上最全概括，十种方法实现水平垂直居中~来自万物之恋

最新推荐文章于 2024-06-02 17:14:20 发布

万物之恋

最新推荐文章于 2024-06-02 17:14:20 发布

阅读量2k

点赞数 6

分类专栏：前端面试题文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_47340917/article/details/121018891

版权

CSS布局居中对齐绝对定位弹性布局网格布局

关键词由CSDN通过智能技术生成

前端面试题专栏收录该内容

24 篇文章 9 订阅

订阅专栏

十种实现水平垂直居中的方法，有用的话就点赞收藏吧！

十种方法实现水平垂直居中

首先设置好需要用到的标签：

<style>
     *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 100vw;
            height: 100vh;
            background: lightgray;
        }
    	 .container{
            width: 300px;
            height: 300px;
            background: rgb(1, 221, 210);
        }
</style>

<body>
    <div class="container">
        <p>
            这里有一段演示文字
        </p>
    </div>
</body>

1. 绝对定位配合外边距

相对父级上边和左边，或者下边和右边各移动50%，同时通过外边距减去自身的宽高各一半的大小。有着所有放法中最好的兼容性，但是必须知晓盒子的具体大小。

.container{
      position: absolute;
       top: 50%;
      left: 50%;
      margin-top: -150px;
      margin-left: -150px;
 }

绝对定位配合外边距

2. 绝对定位配合外边距二

将盒子的上下左右定位全部设置为0，同时设置外边距自适应

.container{
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
 }

绝对定位配合外边距二

3. 绝对定位配合偏移

第一种方法的升级版，放弃外边距的写法，使用CSS3中的新属性transform: translate(-50%,-50%); 来直接减去盒子自身的50%大小，不需要知道盒子的具体大小。

.container{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
  }

绝对定位配合偏移

4. 弹性布局

css3引入的新布局模式，可以设置各种属性来有效排列容器内的元素。需要设置在父级上，但是父级必须设置固定有效的高度，不然无法垂直居中无法实现。

body{
     display: flex;
     justify-content: center;
     align-items: center;
 }

弹性布局

5. 网格布局

与弹性布局相似，但是网格布局的优势在于网格布局分布元素是逐行分布，保留块元素特性；而弹性布局设置居中后，所有块级子元素会获得行内元素的特性。

 body{
  	display: grid;
    align-items: center;
    justify-content: center;
 }

网格布局

6. 使用类似表格的布局特性

给容器赋予类似
标签的布局特性，，同时配合文字居中属性。前提是容器父级拥有确定有效的宽高，即不能设置为百分比，使用vw，vh等单位也同样不行。

 .container{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

使用类似表格的布局特性

7. 外边距左右自适应配合弹性盒子

父级使用弹性布局，使元素垂直居中，同时子元素设置外边距自适应来达到水平居中的效果。

 body{
      display: flex;
      align-items: center;
}

 .container{
     margin: 0 auto;
 }

外边距左右自适应配合弹性盒子

8. 使用display：box 并设置相应属性

使用display的属性之一，写法上和第三种方法相似，但是目前主流浏览器都不支持，虽然可以通过兼容性写法来使用，但是不推荐（作者在使用时仅成功实现了垂直居中，慎用！）

body{
    display: box;
    box-pack: center;
    box-orient: vertical;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-orient: vertical;
 }

9. 使用内边距撑开容器

在不对容器设置宽高，但是里面存在内容的情况下，设置上下左右相等的内边距，可以将容器撑开，并且内容会水平垂直居中。但由于块级标签的特性，水平方向上会受到父级容器宽度的影响。

.container{
    padding: 50px;
 }

10. 文字居中与同等行高

在知晓父级容器高度的情况下，给块级子元素设置文字居中属性，以及和父级高度相等的行高，可以使内容水平垂直居中，使用在单行文本内容的情况下效果最佳。

p{
  text-align: center;
  line-height: 300px;
}

文字居中与同等行高
这里是万物之恋，我们下次再见吧！

万物之恋

关注

6
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
史上最全概括，十种方法实现水平垂直居中~来自万物之恋

十种实现水平垂直居中的方法，有用的话就点赞收藏吧！十种方法实现水平垂直居中1. 绝对定位配合外边距2. 绝对定位配合外边距二3. 绝对定位配合偏移4. 弹性布局5. 网格布局6. 使用类似表格的布局特性7. 外边距左右自适应配合弹性盒子8. 使用display：box 并设置相应属性9. 使用内边距撑开容器10. 文字居中与同等行高首先设置好需要用到的标签：<style> *{ margin: 0; padding: 0;
复制链接

扫一扫