学会这些方法，CSS居中布局那都不是事！

最新推荐文章于 2023-09-11 18:44:00 发布

lander_xiong

最新推荐文章于 2023-09-11 18:44:00 发布

阅读量664

点赞数

分类专栏： Jquery 文章标签： css 布局 web开发 css居中布局 css居中

本文链接：https://blog.csdn.net/lander_xiong/article/details/79059597

版权

Jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

居中，在网页web开发的应用场景是非常广泛的，在很多时候居中的设计会更显得美观大方，同时在UI设计中也是很常用的布局手法。所以在学习css布局中，学会居中是必不可少的功课，下面我就简单的介绍在开发中经常用到的居中方法。

注：以下方法暂不考虑IE浏览器兼容的问题。

1. 字体垂直居中

文字居中是一个常见，也很基础的应用。其方法也很简单，只要设置字体的行高line-height（自行百度）和盒子的高度一致即可。水平垂直设置text-align:center 即可。

<!-- css代码 -->
<style>
 h2 {
    height: 100px;
    border: 1px solid #cccccc;
    line-height: 100px;
    text-align: center;
   }
</style>
<!-- html结构代码 -->
<body>
    <h2>文字居中</h2>
</body>

效果图：
这里写图片描述

2. 设置margin的值为auto

如果想要一个固定宽高的盒子针对父盒子进行水平居中，可以使用margin的属性，只要设置子盒子的margin-left和margin-right的值为auto,盒子就会自动居中。

<!-- css代码 -->
<style>
  div {
     height: 100px;
     width: 300px;
     border: 1px solid #cccccc;
     line-height: 100px;
     text-align: center;
    }
  .box {
     margin: 0 auto;
   }
</style>
<!-- html结构代码 -->
<body>
  <div class="box">
       盒子居中
   </div>
</body>

效果图：
这里写图片描述
3. 使用子绝父相的方式进行居中

此时如果设计有垂直需求，使用margin: 0 auto的方式就满足不了需求了。我们可以使用绝对定位和相对定位的方式来进行居中，父盒子设置：position: relative，子盒子设置，positon: absolue, 然后设置子盒子的left: 50%, top: 50%, magin-left: (等于负的自身盒子长度的一半)，margin-top: (等于负的自身盒子的高度的一半)；

<!-- css代码 -->
<style>
    html,body {
      height: 100%;
     }
     .big-box {
         position: relative;
         width: 100%;
         height: 100%;
     }
    .box {
        height: 100px;
        width: 300px;
        border: 1px solid #cccccc;
        line-height: 100px;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -150px; /* 自身盒子宽度的一半 */
        margin-top: -50px;  /* 自身盒子高度的一半 */
    }
</style>
<!-- html结构代码 -->
<body>
    <div class="big-box">
        <div class="box">
            盒子居中
        </div>
    </div>
</body>

效果图：
这里写图片描述

4. 使用transform方法进行居中

在使用margin的方式进行居中时，需要知道盒子自身的宽高才可以设置属性，失去了代码设计的灵活性。css3新增了一个transform的属性，可以用它来代替margin的方法，在子绝父相的前提下，增加transform:translateX(-50%) translateY(-50%);这行代码即可。

<!-- css代码 -->
<style>
    html,body {
        height: 100%;
    }
    .big-box {
        position: relative;
        height: 100%;
    }
    .box {
        height: 100px;
        width: 300px;
        border: 1px solid #cccccc;
        line-height: 100px;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform:translateX(-50%) translateY(-50%); /* 该属性会自动计算自身的长度，需要注意的是如果设置两个tanslate属性需要连写 */
    }
</style>
<!-- html结构代码 -->
<body>
    <div class="big-box">
        <div class="box">
            transform
            盒子居中
        </div>
    </div>
</body>

效果图：
这里写图片描述

5. 使用flex布局实现居中

如果不考虑浏览器兼容的问题，使用flex布局来居中是非常方便，只需要加两行代码即可实现。在父盒子添加display: flex，用来声明flex布局，然后设置：justify-content: center，该属性可以实现主轴水平居中；align-items: center ，该属性可以实现侧抽垂直居中。可以根据需求进行选择。

<!-- css代码 -->
<style>
    html,body {
        height: 100%;
    }
    .big-box {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box {
        height: 100px;
        width: 300px;
        border: 1px solid #cccccc;
        line-height: 100px;
        text-align: center;
    }
</style>
</head>
<!-- html结构代码 -->
<body>
    <div class="big-box">
        <div class="box">
            flex布局
            盒子居中
        </div>
    </div>
</body>

效果图：
这里写图片描述

6. 快速定位到浏览器中心点

有时候我们想快速地将盒子定位在浏览器的中心点的位置上，如：常用的缓存动画、过渡动画，等等。此时我们可以用子绝父相结合margin的属性来进行居中。只需要在子盒子中设置如下属性即可：left: 0; right: 0;top: 0; bottom: 0; 最后设置 margin: auto;就可以了。

<!-- css代码 -->
<style>
    html,body {
        height: 100%;
    }
    .big-box {
        position: relative;
        height: 100%;
    }
    .box {
        height: 100px;
        width: 300px;
        border: 1px solid #cccccc;
        line-height: 100px;
        text-align: center;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>
</head>
<!-- html结构代码 -->
<body>
    <div class="big-box">
        <div class="box">
            浏览器中心点
            盒子居中
        </div>
    </div>
</body>
</html>

效果图：
这里写图片描述

常用的css居中布局方法就先介绍到这里了，我想学会这6种方法已经满足日常开发中使用了。

lander_xiong

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
学会这些方法，CSS居中布局那都不是事！

居中，在网页web开发的应用场景是非常广泛的，在很多时候居中的设计会更显得美观大方，同时在UI设计中也是很常用的布局手法。所以在学习css布局中，学会居中是必不可少的功课，下面我就简单的介绍在开发中经常用到的居中方法。注：以下方法暂不考虑IE浏览器兼容的问题。
复制链接

扫一扫

专栏目录