在div+css布局中,水平、垂直局中是很常用的,但对于像我这样的小白来说,经常会出现有些css设置不起作用,后来就网上搜索一些资料研究了一番,现在总结如下,以后好翻看。
对于行内元素、块状元素,定宽的元素、不定宽的元素,水平、垂直局中的设置都是不一样的。
水平局中
1、行内元素:
当子元素为行内元素,对父元素设置text-align:center;
2、定宽块状元素
当子元素为定宽块状元素,设置左右margin值为auto,如:margin:0 atuo;
3、不定宽块状元素
我们经常会遇到不定宽度块级元素的使用,如分页导航,因为分页的数目不定,所以不能用宽度限制住。此时对元素进行水平居中主要有三种方式:
- 加入 table 标签
- 设置 display;inline 方法
- 设置 position:relative 和 left:50%;
(1)加入 table 标签
第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。
第二步:为这个 table 设置“左右 margin:auto”(这个和定宽块状元素的方法一样)。
HTML结构:
<div>
<table>
<tbody>
<tr><td>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</td></tr>
</tbody>
</table>
</div>
css样式
<style>
table{
margin:0 auto;
}
ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
</style>
缺点:是增加了无语义的HTML标签,增加了嵌套深度
(2)设置 display:inline 方法
改变块级元素的 dispaly 为 inline 类型,然后使用 text-align:center 来实现居中效果。
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;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.container li{
margin-right:8px;
display:inline;
}
</style>
缺点:将块级元素的display设置为inline,于是少了很多功能,比如盒子模型
(3)设置 position:relative 和 left:50%;
通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 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>
这种方法可以保留块状元素仍以 display:block 的形式显示,优点不添加无语议表标签,不增加嵌套深度。
缺点:设置了 position:relative,带来了一定的副作用。
4、通用方案
flex布局,对父元素设置display:flex;justify-content:center;
这四种方法各有利弊,根据实际情况选用。
垂直居中
1、父元素高度确定的单行文本
设置父元素的height等于行高line-height。注意:如果多行内联文本这样设置就会被切割成几部分,很难看,如下:
2、父元素高度确定的多行文本
3、父元素高度不确定的多行文本
以上有三种情况详解请看:https://segmentfault.com/a/1190000003111071
4、通用方案
flex布局,给父元素设置{display:flex; align-items:center;}。