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

CSS-水平/垂直居中总结

2017-04-07 19:21 981 查看

水平居中总结：

“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量不确定，所以不能通过设置宽度来限制它的弹性。

不定宽块状元素居中的三种方法：

1.加入
table
标签

2.设置
display:inline
方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置

3. 设置
position:relative
和
left:50%
：利用相对定位的方式，将元素向左偏移50%，即达到居中的目的

方法1.加入
table
标签

table其长度根据其内文本长度决定，具有“长度自适应性”，可看做是一个定宽度块元素，然后利用定宽度块状居中的margin的方法，使其水平居中。

step1. 为需要设置的居中的元素外面加上一个table标签（包括
<tbody>、<tr>、<td>
）

step2. 将table设置为“左右margin居中”（和定宽块状元素的方法相同）

实例：

html代码：

<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>


css代码：

<style>
table{
border:1px solid;
margin:0 auto;
}
</style>


方法2：设置
display:inline
方法

step1、改变块级元素的 
display
为 
inline
类型（设置为 行内元素 显示）

step2、使用 
text-align:center
来实现居中效果。

与方法一相比，方法2的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。

实例：

html代码：

<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>


css代码：

<style>
.container{
text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>


方法3：设置
position:relative
和
left:50%

step1、给父元素设置 float，然后给父元素设置 position:relative 和 left:50%

step2、子元素设置 position:relative 和 left: -50% 来实现水平居中。

实例：

html代码：

<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>


css代码：

<style>
.container{
float:left;
position:relative;
left:50%
}

.container ul{
list-style:none;
margin:0;
padding:0;

position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>


垂直居中总结：

比如很多报纸的文章标题在左右一侧时，常会设置为垂直居中。

垂直居中的两种情况：

1.父元素高度确定的单行文本

2.父元素高度确定的多行文本

1、父元素高度确定的单行文本

设置父元素的 高度
height
和行高（行间距） 
line-height
高度一致来实现。

line-height
与 
font-size
的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。

这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

实例：

html代码：

<div class="container">
hi,imooc!
</div>


css代码：

<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>


2、 父元素高度确定的多行文本、图片等

方法1：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

在父元素设置css中的垂直居中属性vertical-align时，会对inline-block类型的子元素都适用

实例：

html代码：

<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>


css代码：

table td{height:500px;background:#ccc}


因为td标签默认设置了vertical-align为middle，所以不需显示地设置了

方法2：可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性。

该方法的好处：不用添加多余的无意义的标签

缺点：

1.chrome、firefox 及 IE8 以上的浏览器下可以，但注意 IE6、7 并不支持这个样式, 兼容性比较差;

2.这样修改display的block变成了table-cell，破坏了原有的块状元素的性质

实例：

html代码：

<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>


css代码：

<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html css 水平居中 垂直居中
相关文章推荐
新的分享
章节导航