css盒子居中问题

最新推荐文章于 2023-09-01 22:20:06 发布

斗弟

最新推荐文章于 2023-09-01 22:20:06 发布

阅读量1k

点赞数

文章标签：前端盒子居中

本文链接：https://blog.csdn.net/L_Lintellect/article/details/96422374

版权

静态页面布局中通过css控制盒子居中的常用方法。

在静态页面不居中，总会遇到许许多多的居中布局，在导航条、图文解说等，都需要用居中（本文说的居中为垂直和水平都是居中的），在此整理出四种居中的方法，提供参考。

f话不多说，先上基本代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>盒子居中</title>
    <style>
        /* 去除默认样式 */
        * {
            margin: 0;
            padding: 0;
        }
        
        .box1 {
            /* margin: 100px auto;
            为了让盒子在中间显示,容易看出效果  */
            margin: 100px auto;
            width: 400px;
            height: 400px;
            border: 2px solid red;

        }

        .box2 {
            width: 200px;
            height: 200px;
            border: 2px solid orange;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
        <!-- <span></span> -->
    </div>
</body>

</html>

第一种：使用margin、padding的方法。

在知道盒子具体宽高数值的时候,使用margin值时居中时，注意高度塌陷的问题，高度塌陷的引起以及解决办法，可以作为一个专题来写的了，在此不做过多解释，本文给盒子加边框，也是为了防止高度塌陷(子元素有margin-top值时，父元素也会跟着一起margin-top下来，给父元素增加边框可以解决塌陷问题。)

使用margin方法居中代码。

.box2 {
	margin:100px; 
}

(400-200)/2=100 所以设置margin为100px,或者给父元素设置padidng值，在此又要分为两种情况，标准盒子模型 box-sizing: content-box; 和怪异盒子模型 box-sizing: border-box; 那么，什么又是标准盒子、什么又是怪异盒子呢。简单的来说，标准的盒子增加padding和border(边框)值会改变盒子在可视化界面（浏览器）中的大小，然而怪异盒模型中无论怎么改变padding、border的值，在浏览器中的盒子的宽高即为在也页面布局时给定的width和height。总而言之，及其不建议使用这种方法，还需要去测量margin、padding的值，极其麻烦！！

第二种：定位的方法

直接看代码吧。

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

定位的有三种，relative（相对定位） absolute（绝对） fixed（固定) 参考点是子元素的左上角的点，因此在距离top、left边50%的时候还需要box2移动自身的50%才能让两个框的中心重合。注意：子绝父相，绝对定位是以最近的那个非静态static定位的容器为标准使用的。

拓展：盒子永远处于居中位置，加在需要居中的元素中

    position: fixed;
    top: 0;
    bottom: 0;
    eft: 0;
    right: 0;
    margin: auto;

第三种的方法：弹性盒的方法（最简单的，推荐使用）

弹性盒布局，移动端页面多用的方法，代码量少，效果明显。

         .box1{
                display: flex;
                justify-content: space-around;
                align-items: center;
             }

第四种方法:在给需要居中的元素增加一个空的兄弟元素方法

这种方法比较麻烦，需要写的样式比较多。

给需要居中的box2元素设置样式

display:inline-block;
vertical-align :middle;

父元素box1设置：

text-align: center;
font-size: 0px;

font-size: 0px; 原因是结构导致，结构之间会有一个空格,一个空格也就是会占据一个字符的空间，一般情况下根字符的大小默认是：16px的，只有设置他为0px才能做到真正居中，而不是视觉上的居中。

对新增的元素设置，其实学到后面可以通过伪元素(::after ::before)的方法增加元素。

                span{
                    display:inline-block;
                    width: 0px;
                    height: 100%;
                    vertical-align :middle ;
                }

到此就完成了居中的设置。

拓展:单纯的想让字体在一个容器居中，有以下两种方法可以快速实现。

*弹性盒布局，

*text-align:center; line-height:height值

padding值的方法也是可以的，但是也是需要去测量，及其麻烦。。。到此就结束了本文的分享，欢迎各位大佬指导。

斗弟

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css盒子居中问题

静态页面布局中通过css控制盒子居中的常用方法。在静态页面不居中，总会遇到许许多多的居中布局，在导航条、图文解说等，都需要用居中（本文说的居中为垂直和水平都是居中的），在此整理出四种居中的方法，提供参考。f话不多说，先上基本代码：<!DOCTYPE html><html lang="en"><head> <meta charset="U...
复制链接

扫一扫