居中问题分为水平居中和竖直居中两种;而根据所居中元素的不同,有行内元素居中和块级元素居中两种居中问题。
1、水平居中——行内元素
text-align: center;
2、水平居中——定宽块状元素
margin: auto
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
3、水平居中——不定宽块状元素
(1)加入 table 标签:利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法设置table样式,使其水平居中。
(2)设置 display: inline 方法:改变块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后使用 text-align:center 来实现居中效果。
(3)设置 position:relative 和 left:50%:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。
4、利用水平对齐和行高
设置text-align 和 line-height 实现单行文本水平垂直居中。
p {
text-align: center;
line-height: 200px;
}
5、通过verticle-align:middle实现CSS垂直居中
vertical生效的前提是元素的display:inline-block。
6、通过line-height实现CSS垂直居中
设置子元素的line-height值等于父元素的height,这种方法适用于子元素为单行文本的情况。
.div{
width:200px;
height:150px;
border:1px solid #000;
line-height:150px;
text-align:center;
}