常用元素居中结构（附图解）

时间：2023-04-02 11:54:17 HTML

1、文本在容器中水平垂直居中tac=text-align:center;水平居中vam=vertical-align:middle;1.1表（table+tac+vam）父容器：display:table；子容器：显示：表格单元格；文本对齐：居中；垂直对齐：中间；1

.container{display:table;}.box{display:table-cell;宽度：150px；高度：150px；文本对齐：居中；垂直对齐：中间；border:1pxsolid#00f}1.2.height&line-height+taccontainer（指放置文字的容器）：设置高度，设置line-height与height高度一致text-align:center;html结构和1.一样，只是没有父元素container.box{width:150px;高度：150px；行高：150px；文本对齐：居中；border:1pxsolid#00f}2.子元素在父元素中水平垂直居中posa=position:absolute;2.1定位+变换父容器有relative、absolute、fixed定位子容器中的一种：position:absolute;顶部：50%；左：50%；转换：翻译（-50%，-50%）；box.container{margin-top:200px;左边距：200px；宽度：450px；高度：450px；边框：2px实心#be572a；位置：相对；}.box{宽度：100px；高度：100px；:50%;转换：翻译（-50%，-50%）；border:1pxsolid#00f}子容器设置为绝对定位后，与父容器的宽高比根据父容器的宽高决定，所以我们需要设置top:50%;左：50%；这时我们可以看到只有盒子的左上角水平和垂直居中了。那么，我们也需要“搬回去”；子容器设置的translate是根据自己的宽高移动的，所以我们可以通过移回自己宽高的50%来得到box的水平和垂直居中补充：由于translate移动了自己的width和高度，如果父容器有固定的宽高，子容器可以设置margin-top和margin-left也可以达到水平和垂直居中的效果2.2display:flex为了和上面的例子区分开来，子元素的宽度和高度被放大并且父元素：display:flex；对齐项目：居中；证明内容：居中；父元素设置flex后，设置justify-content和align-items控制子元素在主轴和横轴上的对齐方式我是flex.container{margin-top:200px;左边距：200px；宽度：450px；高度：450px；边框：2px实心#be572a；显示：弹性；:1pxsolid#00f}3.水平居中1.1(当子元素设置为绝对定位时)margin0autoparentcontainerwithrelative,absolute,fixedpositioningchildcontainer:position:absolute;左：0；右：0；margin:0auto;左右拉宽，margin0auto控制水平居中.container{margin-top:200px;左边距：200px；宽度：450px；高度：200px；边框：2px实心#be572a；位置：相对；}.box{宽度：200px；右：0；保证金：0自动；border:1pxsolid#00f}其实这里可能有人会疑惑，父容器已经设置好宽高了，直接设置margin0auto不就好了吗？即如果子容器没有设置绝对定位，可以直接设置margin0auto。如果我们因为需要在子容器中设置了绝对定位，那么即使父容器设置了宽高，子容器margin0auto也不会水平居中effect/*left:0;右：0；*/

上一篇：CSSViewport单元，很多人不知道怎么用它来快速布局！

下一篇：JS弹幕代码分析

常用元素居中结构（附图解）相关文章