transform居中 html form居中

HTML

如果div的大小是固定的（比如说是400×300）：

transform居中 html form居中

transform居中 html form居中

如果div的大小不固定，则（此方法有兼容性问题，老式浏览器不支持）：

html水平居中和垂直居中怎么设置

水平居中：

行内元素：可以父级利用text-align: center;进行水平居中

块级元素：

①可以利用margin: 0 auto;进行水平居中

②使用ition决定定位

利用margin-left进行左偏移

利用transform进行左偏移

③使用flex布局

垂直居中：

内联元素：可以使用line-height进行垂直居中

块级元素：

①使用ition定位

利用margin-top进行上偏移

利用transform进行上偏移

②使用flex布局

常用的基本就这些，当然还有grid布局，父级设置为table布局，进行设置等方案，这边不做过多赘述。

AE问题：如何用表达式使文字内容居中？

我理解你的意思了，你不能这么想，即使你把文字的ition定义到合成高度宽度的二分之一（也就是comp的中心）但是中心点位置你居中以后它是默认在文字层下方的中心，所以中心点还是不在文字的正中心，有2个办法可以去做，要么新建好文字层以后直接按y键，把中心点手动调整到文字层的中心（配合标尺工具），然后在文字层的ition中用center=[thisComp.width/2,thisComp.height/2]就可以了，还有一种办法，和这种办法几乎很相似，但是比这个准确一点，也能更加理解这些东西，首先，定义中心点考虑的是文字的大小，而不是这个合成的高度了（或者说是层的高度），比如字体是50px大小的和30px大小的 字体的高度是不一样的，知道这个再去找能控制高度的属性，一个是字体大小能控制文字的高度和宽度，还有一个就是缩放，字体大小不能写表达式，没办法链接，而缩放呢又是百分比的形式所以又不能做，（并且缩放它是以合成大小来缩放的，咱们是只需要文字的高不是合成或者层的高）所以只能用笨方法了，把文字拖到合成的左上角或者右上角，沿着合成的高度和宽度边对齐文字，用标尺工具从上往下拉一个标尺线，与文字层的底部对齐，拿720576大小的合成来讲，字体大小40，然后居中工具居中一下，放到合成的左上角，与合成的边都对齐，用工具拉出标尺线与文字底边对齐后对应的数值就是27，这时候我就能判断了，文字的高度是27像素，所以我就在中心点位置书写表达式了：

x=transform.anchorPoint[0];

y=27/2;

[x,-y]

这时候中心点就在文字的正中心了。

~~~~~~~~~~~~~

然后我再在文字层的ition上写表达式

center=[thisComp.width/2,thisComp.height/2];

center（这句可有可无，写了就比较符合表达式的格式）

表达式书写完以后就会发现文字和中心点都在合成的正中心了！以上表达式有个缺点就是，你在加大或者减小文字的时候中心点不会跟着移动，中心点还是在你定义的地方。为了方便作文字大小变化用scale属性来进行控制！

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

其实表达式没有必要像你这样硬去写，能简单手动的就去简单手动一下，毕竟AE不是编程软件！表达式只是让我们去做一些k帧不容易做到或者是压根k帧做不到的时候才用到它。不过你提的这个问题是挺有意思的！

CSS之元素水平居中

我们以一个面试题开始吧

这道题看似貌似很简单，但是我们需要分析具体的场景，因为不同的显示方式的使用利弊是不一样的。

以下的讨论都是子元素相对于其父元素的水平居中。垂直居中，以后会说到。

常见的行内元素有 span img 等，对这些元素居中设置，只需要在父元素的css中添加 text-align:center 即可。同样它也对行内块元素也是有效的。

但是，有个缺点，由于 text-align 是可继承属性，即父元素内部的所有元素都会继承这个属性，从而它的子元素内部的文本都会居中显示了。因此需要对子元素的文本居中方式单独设定。

针对块级元素的居中，我们将分为定宽和不定宽两种情况来讨论。

1.定宽

（1）子元素是正常流布局

若子元素的宽度是已知的，那么我们可以设置子元素的左右 margin 为 auto 即可

行内块元素也算块级元素，同样适用

目前所有浏览器都是支持的

（2）子元素定位布局(absolute)

如果子元素是定位的，由于子元素此时是脱离文档流，上面的方法就失效了。这时需要明确指出子元素的定位，四个方位均要指定。如下：

这样也可以实现定位元素的居中。原因可点击 这里 。如果定位子元素的margin为auto，你会发现它水平垂直居中了！此方法仅适用于IE8+浏览器中，IE7就挂了，不过你可以下面这个方法：

2.不定宽

不定宽元素如果要居中需要额外的辅助手段

（1）css3新特性 transform

如果你对浏览器并没有什么特别要求，那么可以使用css3提出的新属性 transform 完成居中需求

这里需要子元素是定位

（2）借助table元素

上面定宽元素设定左右margin为auto之所以可以居中，原因是左右margin会平分父元素剩下的空间。有个元素除外，那就是tabel元素。table有趣的地方在于它本身并不是块级元素，如果不给它设定宽度的话，它的宽度由内部元素的宽度“撑起”，但即使不设定它的宽度，仅设置margin-left:auto和margin-right:auto就可以实现水平居中。

的缺点想必你也是知道，就是无关标签太多，加深了嵌套的层级，维护性。

（3）父元素使用float布局

这里需要多添加一层父元素，父子元素均float布局，之后设置ition为relative，left为50%

缺点是你需要额外处理浮动所带来的一些问题。并且如果你设置了背景色，布局会有些混乱

以上是我对元素实现居中的一些方法，欢迎大家补充。

2017.6.11 晴

于上海浦东

css垂直居中怎么设置

1、通过verticle-align:middle实现CSS垂直居中。

通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。

2、通过display:flex实现CSS垂直居中。

随着越来越多浏览器兼容CSS中的flexbox特性，所以现在通过“display:flex”实现CSS水平居中的方案也越来越受青睐。

通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;

这个跟CSS水平居中的原理是一样的，只是在flex-direction上有所别，一个是row(默认值)，另外一个是column。

3、通过伪元素:before实现CSS垂直居中。

具体方式是为父元素添加伪元素:before，使得子元素实现垂直居中。

4、通过display:table-cell实现CSS垂直居中。

给父元素display:table，子元素display：table-cell的方式实现CSS垂直居中。

5、通过隐藏实现CSS垂直居中。

创建一个隐藏#hide，使得隐藏的height值为剩余高度的一半即可。

这种方法也适用于CSS水平居中，原理一样。

6、已知父元素高度通过transform实现CSS垂直居中。

给子元素的ition:relative，再通过translateY即可定位到垂直居中的位置。

7、到垂直居中的位置。

8、通过line-height实现CSS垂直居中。

设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。

transform的translate、scale、rotate、skew（2D）的简单使用

border: 1px dashed red; solid 为实线； dashed 为虚线。

margin: 0 auto; ， margin 后面如果只有 两个参数 的话，个表示 top 和 bottom ，第二个表示 left 和 right 。

因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）。

如上图所示，X轴偏移的方法有如下三个

如上图所示，Y轴偏移的方法有如下两个

如上图所示，Y轴偏移的方法有如下一个

注意： 上述所说的都是X和Y轴的正向偏移，我们也可以给它设置成 负数 ，使其往反向偏移，如 transform: translate(-100px) ；即为向x轴的反向（左侧）偏移了100px。

该函数只 接受数字 ，不接受类似于”100px“。

如上图所示，X轴缩放的方法有如下两个

如上图所示，Y轴缩放的方法有如下两个

如上图所示，Y轴缩放的方法有如下两个

该函数只接受一个参数，也就是 角度 。

角度可以由以下四种不同的单位类型来定义。

该函数只接受一个参数，也就是角度。

如上图所示，X轴倾斜的方法有如下两个

如上图所示，Y轴倾斜的方法有如下一个

如上图所示，X/Y轴倾斜的方法有如下一个

如何让div在父元素中水平且垂直居中

实现效果：

利用定位margin取值让子元素居中 :

margin取值应为子元素宽高的一半（margin的取值可以为负值，但padding显然不行）， 缺点是 必须知道子元素的宽高具体大小且需要计算，当子元素的大小被修改后对应的margin值也需要修改否则达不到剧中的效果，从而我们使用更方便快捷的方法。

利用定位与transform实现垂直水平居中 ：

transform：translate（-50%，-50%） 个-50%是指x轴方向向左位移 子元素本身 宽的百分之50，而第二个-50%是指元素在y轴方向向上平移 子元素本身 高的百分之50。

二者的原理是相同的都是在加了 left：50% 与 top：50% 后再减去盒子宽高的一半来实现水平垂直居中。

给父元素添加display：flex；让它变成弹性盒，在利用justify-content: center;与 align-s: center;，让子元素在主轴与交叉轴（纵轴）方向居中。 缺点是 在网页端弹性盒因为兼容问题一般不被经常使用。

设置一个元素在一个容器中垂直居中，必须更改默认的 display 属性值为 inline-block; 并加上同级元素（标尺）（同级元素[标尺]样式设置为 vertical-align:middle;width:0;height:;display:inline-block; ）

三个条件：

原理类似于利用弹性布局，将父元素转换为网格元素再利用 ustify-s：center （内容在单元格内的水平对齐方式），和 align-s：center； （内容在单元格内垂直对齐方式） place-s 为复合写法，相当于父元素为一个一行一列的单元格而box1为它单元格中的元素。（其实很利用 place-content 也能做到原理还没搞懂...）