CSS学习笔记（五）：居中显示

最新推荐文章于 2024-09-24 12:57:22 发布

amber053

最新推荐文章于 2024-09-24 12:57:22 发布

阅读量351

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/amber053/article/details/78560855

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

水平居中显示

水平居中显示又分为行内元素的居中显示和块状元素的居中显示，块状元素中又分为定宽状元素，以及不定宽状元素

行内元素的水平居中显示

类似于文本、图片等行内元素的水平居中设置，是通过给父元素设置text-align:center来实现的

例如，文本“居中显示”想要被居中显示

<body>

</body>

则文本“居中显示”为div的子元素，我们可以通过设置div的text-align属性来完成对于文本水平居中显示的设置

<style>

.txtCenetr{

text-align:center;

}

</style>

块状元素的水平居中显示

定宽块状元素的居中显示

定宽块状元素及宽度width为固定值的块状元素，这类元素的水平居中显示可以通过设置左右margin值为auto实现

例如，设置定宽块状元素div进行水平居中显示

<body>

<div>水平居中显示</div>

</body>

进行居中设置的CSS样式

<style>

div{

width:200px;/*定宽*/

margin:20px auto;/*margin-left与margin-right设置为auto*/

/*或者写成margin-left:auto; margin-right:auto; */

}

</style>

不定宽块状元素的居中显示

不定宽块状元素指的是宽度width不固定的块状元素

不定宽块状元素的水平居中设置方法有：

（1）使用table标签

（2）将显示类型设置为行内元素，使用display:line进行设置

（3）利用相对定位的方式，将元素向左移动50%，即设置position:relative和left:50%

1、使用table标签

我们知道，定宽块状元素的居中设置可以通过对margin设置auto值来达到目的，那么对于不定宽块状元素，我们就可以想办法将其转变为定宽块状元素从而使用定宽块状元素水平居中的方法进行居中设置。

table标签具有长度自适应性可以实现这一目的，这一特性使得table的程度时根据其内文本长度决定的，因此可以将table看成一个定宽块状元素（宽度与文本长度一致），然后利用margin方法使其水平居中。

eg:设置页数居中

html代码如下：

<div>

<table>

<tbody>

<tr>

<td>

<ul>

</ul>

</td>

</tr>

</tbody>

/table>

</div>

CSS代码如下：

<style>

table{

margin:0 auto;

}

</style>

效果如下：

2、使用display:inline

我们知道，对行内元素进行居中设置，只需使用text-align:center即可，那么对于不定宽块状元素而言，我们是不是能够将不定宽块状元素也转变为行内元素进行居中设置呢？答案显示是肯定的。

首先使用display:inline使得块状元素转变为行内元素显示，再在CSS中使用text-align:center进行居中设置

同样是对页码进行居中显示

<html>代码：

<body>

<ul>

</ul>

</div>

</body>

CSS代码：

<style>

.container ul{

display:inline;

}

.container{

text-align:cente;

}

</style>

3、使用浮动和相对定位（难点）

回顾层模式的浮动布局模式，我们可以通过设置float属性及设置{position:relative;left:50%}使得块状元素向左浮动50%，此时，该<div>块状元素的左边界为页面的中间线，如图所示

此时让子元素相对<div>父元素往左再偏移50%，及{position:relative;left:-50%}就能使得子元素的中心刚好与页面中心线重合，如图所示

示例代码如下：

<!DOCTYPE HTML>
<html>
	<head>
	<meta context="text/html" charset="Unicode" />
	<title>这是一个html文档</title>	
	<style type="text/css">
		.container{
			border: 1px solid red;
			float: left;
			position: relative;
			left: 50%;	
		}
		.container p{
			float: left;
			position: relative;
			left: -50%;
		}
	</style>
    </head>
	<body>
		<div class="container">
			<p>
				this is a division<br />
				this is a division<br />
				this is a division<br />
			</p>
		</div>
	</body>
</html>

垂直居中显示

垂直居中显示分为两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本

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

设置父元素的height（元素高度）和line-height（行间距）高度一致实现垂直居中

例如，实现<div>块中的文本垂直居中

html代码：

<body>

</div>

</body>

CSS代码：

.wrap h2{

margin:0;

height:100px;

line-height:100px;

}

为什么使height和line-height等高就可以实现垂直居中呢？要回答这个问题，我们首先要清楚什么是垂直居中，垂直居中就是在子元素竖直方向上的中心线（水平中心线）和父元素竖直方向上的中心线重合，即可视为，子元素的上边界和父元素的上边界的距离，与子元素的下边界与父元素的下边界的距离相等（如下图所示）。

在CSS中，line-height与font-size的计算值之差，即所谓的“行间距”，是被等分为两半，分别加到一个文本行内容的顶部和底部的。回到上面的代码，height:100px说明<p>元素的高度就是100px，而line-height:100px说明行间距等于100px，在顶部和底部分别有50px，这样看起来就刚刚好居中了。

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

方法一：使用插入table标签，同时设置vertical-align:middle

vertical-align是用于设置竖直居中的属性，在父元素设置此样式时，会对inline-block类型的子元素都有用

例如，下面的实例使用table标签使得图片垂直居中显示

html代码：

<body>

<div>

</div>

</td></tr></tbody>

</table>

</body>

CSS代码：