CSS布局——水平居中

最新推荐文章于 2023-03-13 08:20:45 发布

白_夜_行

最新推荐文章于 2023-03-13 08:20:45 发布

阅读量449

点赞数

分类专栏： CSS 文章标签： css 布局水平居中 margin

本文链接：https://blog.csdn.net/qq_34356563/article/details/78238828

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这两天，在网上做项目的时候发现以前一直把重点放在js上，基础的css现在反倒成了比较薄弱的一块，使用时感觉很混乱的样子。所以决定趁着毕业之前梳理一下css方面的知识点，来一波css系列。

让一个元素进行水平居中是在实际项目中再平常不过的需求了，可以由以下两种方法来实现：

1.使用自动空白边让元素居中

<body>
    <div id="wrapper"></div>
</body>

      #wrapper{
          width: 100px;
          height: 100px;
          background: red;

          margin: 0 auto;
      }

对，就是这么简单！！！但是现在有一个问题怪异模式中的IE5.X和IE6不支持空白边，那这个问题该怎么解决呢？

上帝给你关上了一扇门的同时，必定会给你打开一扇窗。在IE7及以下版本中（亲测结果，未必准确）text-align：center误解为让所有东西居中，而不只是文本。所以我们可以利用这一点在body上加上text-align: center,然后再在#wrapper上设置text-align:left还原默认情况即可。所以完整的解决方案如下：

        body {
            text-align: center;
        }

        #wrapper {
            width: 100px;
            height: 100px;
            background: red;

            text-align: left;
            margin: 0 auto;
        }

同时上面的方案也解决了当元素为inline元素或者inline-block元素时的情况，我们都知道当元素为inine元素或者inline-block元素的时候设置自动空白边是无效的，因为这两种元素压根就没有空白边（默认情况下）。但是如果在父元素上设置text-align：center可以让这两种元素水平居中，但是没有办法让block元素水平居中（IE7及以下可以）。

扩展知识点：

1.inline元素设置宽高是无效的，inline-block元素设置宽高是有效的

2.inline元素设置左右margin是有效的，而设置上下margin是无效的，而inline-block元素设置上下左右都是有效的

2.使用定位和负值空白让元素居中

使用自动空白虽然是很常用的方法，但是它需要使用一些方法来处理兼容性，并且要求对两个元素应用样式，所以下面这种方法也很常见。

<body>
    <div id="wrapper"></div>
</body>

#wrapper {
            width: 100px;
            height: 100px;
            background: red;
            
            position: relative;
            left: 50%;//父元素的50%
            margin-left: -50px;//自身元素的一半
        }