CSS布局——水平居中

来源：互联网发布：科比勤奋知乎编辑：程序博客网时间：2024/06/06 09:34

这两天，在网上做项目的时候发现以前一直把重点放在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;//自身元素的一半        }

阅读全文

0 0