CSS样式之内容居中方法


水平居中

HTML中要实现某一内容水平居中显示,要通过设置css样式来实现,主要分为行内元素块状元素两种情况,块状元素又可分为块状定宽块状不定宽两种情况,接下来依次介绍分析。

行内元素

像 a、span、i 这类元素叫做行内元素,文本图片也是行内元素。行内元素水平居中方法简单,只需要给行内元素的父元素设置 text-align: center; css样式就内实现内容水平居中,例如:
html:

<div class = "txt">居中内容</div>

css:

.txt {
	text-align: center;
}

文本内容的父元素就是 div ,这样就内实现水平居中,效果如下:

居中内容

块状定宽元素

常见块状元素有 div, p, h 等,定宽即为其设置固定宽度值 width,这时我们可以为元素设置 margin-leftmargin-right 来实现水平居中,也可以简写为 margin: 0 auto;,例如:
html:

<div class = "txt">居中内容</div>

css:

.txt {
	width: 100px;
	margin: 10px auto;
}

实现效果如下:

居中内容

块状不定宽

有时候我们不能限制块状元素的宽度,就是块状不定宽元素,主要有三种方法,接下来一次介绍。

1、加入 table 标签

利用 table 标签的长度自适应性,长度根据内容自动调整,然后通过设置 margin: auto; 实现水平居中,例如:
html:

<table>
	<tbody>
		<tr>
			<td>
			<div class = "txt">居中内容</div>
			</td>
		</tr>
	</tbody>
</table>

css:

.txt {
	margin: auto;
}

效果如下:

居中内容
2、设置为行内元素

就是通过设置 display: inline; 将块状元素设置为行内元素,然后就是像行内元素一样设置 text-align: center; 来是内容水平居中,例如:
html:

<div class = "txt">居中内容</div>

css:

.txt {
	display: inline;
	text-align: center;
}

效果为:

居中内容

注:

使用这种方法虽然可以不用像table增加无语义标签,但是改变了display,所以会少了一些功能,例如不能设置宽度。

3、设置浮动和相对定位

这种方法设置就相对复杂,同时设置浮动相对定位来实现元素的水平居中。
首先设置父元素

float: left;
position: relative;
left: 50%;

然后设置子元素

position: relative;
left: -50%;

通过代码应该好理解,就是通过**50%那个关键位置来实现水平居中效果,因为50%**是界面的中央位置,将父元素右移,直到左边框移到中线位置,在将子元素向左移,这样子元素不就居中了吗。

这里要注意的是分别设置父元素50%子元素-50%
实现效果如下:

居中内容

垂直居中

说完水平居中接着说垂直居中,这里主要又分为两种情况:父元素高度确定的单行文本父元素高度确定的多行文本

单行文本

对于父元素高度确定的单行文本,可以通过设置父元素heightline-height 高度一致来实现。

这里可以这样理解,height 是元素的高度,例如文本字体的高度,line-height 是行高,例如文本的行间距,一行文本中,行间距被分为两部分,分别位于这行文本的顶部底部(因为行间距是两行之间的距离),所以设置 heightline-height 一样大的话,line-height 就被均分为两部分,分别位于元素顶部和底部,这样中间设置为 height 的元素不就实现垂直居中了吗 ^_^ .

例如:
html:

<div class = "txt">居中内容</div>

css:

.txt {
	height: 200px;
	line-height: 200px;
}

效果如下:



居中内容



这里需要注意的是关键词“单行文本”,如果使用这种方法但是一行文本超过宽度限制的话,某些内容就会脱离元素块,子元素有多行的话,这几行就会并排居中,并保持设置的行高。

多行文本

对于父元素高度确定的文本图片等内容设置垂直居中,主要有两种方法。

1、使用 table 标签

对元素使用table标签,包括 tbody,tr,td,然后对父元素设置 vertical-align: middle; 样式,就能使 inline-block 类型的子元素垂直居中显示。

因为 td 标签默认设置了 vertical-align: middle,所以也可以不用单独设置 vertical-align
例如:
html:

<table>
	<tbody>
		<tr>
			<td class="txt">
				<p>居中内容</p>
				<p>居中内容</p>
				<p>居中内容</p>
			</td>
		</tr>
	</tbody>
</table>

css:

.txt {
        height: 300px;
	background-color: #ccc;
}

这里的父元素就是 td,父元素的高度必须确定,就要为其设置 height。

注意这里的 p 元素是 inline 类型的,所以设置 vertical-align: middle 的话会出现错误,若果是图片元素 img 的话,就可以设置 vertical-align: middle,但是由于 td 标签默认,所以都可以不写。

效果如下:



居中内容



2、设置 table-cell

第二种方法是把要垂直居中显示的元素的父元素设置为**table-cell (表格单元)**类型:display: table-cell;,然后设置 vertical-align: middle就能实现元素垂直居中。

但是这个方法存在兼容性问题,chrome, firefox, IE8以上才支持这个操作。

例如:
html:

<div class="txt">
	<p>居中内容</p>
	<p>居中内容</p>
	<p>居中内容</p>
</div>

css:

.txt {
        height: 300px;
	background-color: #ccc;
	display: table-cell;
	vertical-align: middle;
}

同样,要为父元素 div 设置高度 height

效果如下:



居中内容



这种方法除了兼容性问题外,同时也改变了 display类型,会在某些方面带来不便。


文章作者: hn-failte
文章链接: https://failte.cn
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 hn-failte !
评论
 上一篇
CSS布局模型详细介绍 CSS布局模型详细介绍
HTML中元素有三种布局模型:流动模型、浮动模型、层模型。 流动模型(flow) HTML网页默认布局就是流动模型,布局如下: 块级元素(block)自上而下垂直分布,因为块级元素默认宽度为浏览器窗口的100%,或者理解为每个块级元素默认占
2018-05-20
下一篇 
LESS从入门到精通 LESS从入门到精通
LESS 从入门到精通 一、LESS 是什么 LESS 是 CSS 预处理语言,是 CSS 的扩展。 然后说说比较流行的几款预编译器:SASS/SCSS、LESS、Stylus。 SASS 学习网站: https://www.sass.h
2018-04-17
  目录