您的位置：首页 > Web前端 > CSS

CSS 水平居中

2017-03-14 18:23 615 查看

你不知道的那些事:

1、absolute：

相对最近的除了position：static之外的父元素偏移。默认：停留在父元素的content区域内！！

但是！！！其实absolute的活动区域是父元素的padding+content，并不仅限于父元素，只是起点在父元素内的左上角。设置left：0，top:0;就发现和默认的不一致了！！！（默认不等同于left：0；top:0;）

所以，当你发现下文中提到的left:50%;它是父元素padding+content长度的50%！！切记！！！

2、relative：

相对自己原来的位置偏移。活动范围是父元素的content区域，这句话说得不对，活动范围没人能拦得住它，并不仅限于父元素，但是当偏移量取值是百分比时，就是相对父元素的content取值了比如left：50%也就是父元素的content的50%。

3、fixed：

相对可视窗口偏移。活动范围是整个可视窗口，left：50%一般也就是浏览器可视窗口的50%啦。

正文:

1. 行内元素text-align:center

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
<style>
.txtCenter{
text-align:center;
}
</style>

2. 定宽块状元素

a. 设置“左右margin”值为“auto”来实现居中的。

<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。
</div>
</body>
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/*margin-left 与 margin-right 设置为 auto */
}
</style>

也可以写成：

margin-left:auto;
margin-right:auto;

注意：元素的“上下 margin” 是可以随意设置的。

分析：

1、此方法居中只适用于占满一行的块状元素，不适用于inline-block。设置width只是content的宽度，加上padding、border和margin以后的整个块占满一行，因此设置margin auto可以使之居中。所以float浮动元素也不适用该方法。

2、absolute/fixed情况时，设置left:0,right:0;就可以把margin扯大啦！！（千万记得设置宽度，不然就不是把margin扯大而是把content扯大啦！）

3、IE6下需在父元素上设置text-align: center;,再给子元素恢复需要的值。

b. 设置元素为absolute/relative/fixed，（1）偏移量（left或者right）设置为50%，（2）margin设置为元素宽度一半乘以-1。

<body>
<div class="content"> aaaaaa aaaaaa a a a a a a a a </div>
</body>
<style>
body {
position: relative;
}
.content {
width: 800px;
position: absolute;
left: 50%;
margin-left: -400px;
}
</style>

注意此时absolute是在父元素的padding+content中居中，50%是父元素padding+content的50%；

relative是在父元素的content中居中，50%是父元素的content的50%；

fixed是视图居中，50%是可视窗口的50%，所以适用想要在浏览器居中的情况。

3. 不定宽块状元素方法

（1）加入 table标签+左右 margin 居中

<div>
<table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
</table>
</div>
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>

（2）设置 display:inline或者inline-block +父元素text-align:center

<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
</ul>
</div>
</body>
<style>
.container{
text-align:center;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline-block;
}
</style>

（3）设置 position:relative 和 left:50%

前文提到的position和移动50%的方案都是基于定宽的，因为如果不定宽，就会被扯大！！毁掉了我们的布局！

有些同学说我就是不想设定宽度，也不想加table，也不想把块状元素变成行内元素怎么办？

当当当！！

给自己添加一层父元素，让父元素紧紧的抱（包）住自己（给父元素设置float或者inline-block），使得父元素和自己一样宽，然后给父元素设置relative和 left:50%，让父亲带着自己飞，飞多远呢？答：飞父亲的父亲也就是爷爷的content的50％。然后子元素设置 position:relative 和 left: -50% 自己单飞，这个时候飞父亲的50%，其实也就是自己的50%，因为自己和父亲一样大。从而来实现水平居中。

<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
</ul>
</div>
</body>
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
</style>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航