perspective-origin属性(CSS设置)

　　perspective-origin属性

属性值：

x轴：它表示透视原点的水平位置。下面列出了x轴的可能值：

百分比(%):它将x轴设置为百分比。

长度：定义x轴的长度。

左侧：设置在x轴的左侧位置。

Cente:它设置x轴上的位置中心。

Right:我将位置正确设置为x轴。

y轴：它表示透视图原点的垂直位置。y轴的可能值如下：

百分比(%):它将Y轴的位置设置为百分比。

长度：它根据长度设置位置。

Top:它设置y轴上的顶部位置。

中心：它设置Y轴上的中心位置。

底部：它设置Y轴上的底部位置。

Initial:它将透视原点属性设置为默认值。

inherited透视原点属性是从其父级继承的。

　　CSS设置

标签(用空格分隔):水平居中和高度居中。

水平居中对齐元素。

水平中心

如果set元素是文本和图片等内嵌元素，则通过为父元素设置text-align:center来实现水平居中。以下代码：

Html代码：

Class='txtCenter '我是文字，哈哈，我想在父容器中水平居中出现。

Css代码：

设置水平块元素。

当set元素是块元素时，使用文本对齐：居中将不起作用。此时有两种情况：定宽块元素和变宽块元素。

固定宽度块元素

满足固定宽度和块状条件的元素可以通过将“左右边距”的值设置为“自动”来居中。将块元素div设置为水平居中：

Html代码：

我是一个固定宽度的块元素，哈哈，我想横向和中心显示。

Css代码：

也可以写成：

左边距left:auto右边距： auto；

注意：

元素的“上下边距”可以随意设置。

水平居中总结-无限宽块单元法。

在实践中，我们会遇到需要为“宽度不定的块元素”设置中心的情况，例如网页上的分页导航。因为分页的次数没有确定，所以我们不能通过设置宽度来限制它的弹性。

不定宽的块元素居中有三种方式(这三种方式比目前用的多):

参与表格选项卡

1.列表顶部：为需求的中心元素集添加一个表标签(包括，)。

2.第二步：为此表格设置“左右边距居中”(这与固定块元素的宽度相同)。

例子如下：

Html代码：

href='#'1

href='#'2

href='#'3

Css代码：

正在设置display:inline内联方法。

将块级元素的显示更改为内联类型，然后使用text-align:center完成居中效果。以下示例：

Html代码：

class='container '

href='#'1

href='#'2

href='#'3

Css代码：

注意

与第一种方法相比，该方法具有不添加无语义标签、简化标签嵌套深度的优点，但也存在一些问题：将块元素的显示类型改为内联元素，因此缺少设置长度值等功能。

设置位置：相对和左侧：50%；

为父元素设置float，然后为父元素设置position:relative和left:50%，为子元素设置position:relative和left:-50%以完成水平居中。

代码如下：

class='container '

href='#'1

href='#'2

href='#'3

Css代码：

此方法可以保持块元素仍然以display:block的形式出现。它的优点是不添加无字表标签和嵌套深度。但是它的缺点是设置了位置：相对，带来了一些副作用。

这三种方法应用广泛，各有利弊。应该选择哪一个？

法，能够视具体情况而定。
　　笔直居中
　　父元素高度确认的单行文本
　　父元素高度确认的单行文本的竖直居中的办法是经过设置父元素的height和line-height高度一致来完成的。如下代码：
　　class="container">hi,imooc!
　　css代码：
　　父元素高度确认的多行文本、图片、块状元素
　　竖直居中的办法有两种：
　　办法一：运用刺进table(包括tbody、tr、td)标签，同时设置vertical-align：middle。
　　说到竖直居中，css中有一个用于竖直居中的属性vertical-align，但这个款式只有在父元素为td或th时，才会收效。所以又要刺进table标签了。下面看一下例子：
　　html代码：
　　class="wrap">
　　看我是否能够居中。
　　看我是否能够居中。
　　看我是否能够居中。
　　看我是否能够居中。
　　看我是否能够居中。
　　css代码：
　　tabletd{height:500px;background:#ccc}
　　由于td标签默许情况下就默许设置了vertical-align为middle，所以咱们不需求显式地设置了。
　　办法二：在chrome、firefox及IE8以上的浏览器下能够设置块级元素的display为table-cell，激活vertical-align属性，但注意IE6、7并不支持这个款式。
　　html代码：
　　class="container">
　　看我是否能够居中。
　　看我是否能够居中。
　　看我是否能够居中。
　　看我是否能够居中。
　　看我是否能够居中。
　　css代码：
　　这种办法的优点是不用添加多余的无意义的标签，但缺陷也很显着，它的兼容性不是很好，不兼容IE6、7。
　　隐性改动display类型
　　有一个风趣的现象就是当为元素（不管之前是什么类型元素，display:none在外）设置以下2个句之一：
　　position:absolutefloat:left或float:right
　　元素会主动变为以display:inline-block的方式显现，当然就能够设置元素的width和height了且默许宽度不占满父元素。
　　如下面的代码，咱们知道a标签是行内元素，所以设置它的width是没有效果的，可是设置为position:absolute今后，就能够了。
　　class="container">href="#"title="">进入课程请单击这里
　　css代码