CSS 레이아웃 지침

1.1 水平居中布局

效果图如下：

image.png

方案一. inline-block + text-align

分析：display设置为inline-block的元素，具有文本元素的性质，其父元素可以通过设置文本对齐属性text-align来控制其在行内的对齐方式，text-align: center即为水平对齐

注意：text-align属性是具有继承性的，会导致自己元素内部的文本也是居中显示的，需要自身设置text-align覆盖

   

       

   

方案二. 定位 + transform

分析：父元素开启定位（relative，absolute,fixed都可以）后，子元素设置绝对定位absolute后，left设置为50%，再使用transform: translateX(-50%)将子元素往反方向移动自身宽度的50%，便完成水平居中。

注意：父级元素是否脱离文档流，不影响子元素水平居中效果，但是transform是css3属性，存在浏览器兼容问题

   

       

   

方案三. display: block + margin: 0 auto

分析：这个方法只需要对子元素进行设置就可以实现水平居中，margin设置auto表示浏览器会自动分配，实现来外边距等分效果。

注意：这里子元素设置display为block或者table都是可以的，如果子元素脱离文档流（浮动，定位），会导致margin属性的值无效。

   

       

   

1.2 垂直居中布局

效果图如下：

image.png

方案一. 定位 + transform

这种方案和之前水平居中布局的方案二是同样的原理，不在赘述

   

       

   

方案二. display: table-cell + vertical-align

分析：设置display: table-cell的元素具有td元素的行为，它的子元素布局方式类似文本元素，可以在父元素使用vertical-align: middle;实现子元素的垂直居中。

注意：vertical-align属性具有继承性，导致父元素内文本也是垂直居中显示的。

   

       

   

1.3 水平垂直居中布局

效果图如下：

image.png

前面分别总结了一些水平居中和垂直居中的布局方式，那么进行水平垂直居中的布局，也就没什么特别要说的了，直接上代码：

方案一.定位 + transform

   

       

   

方案二. 结合水平布局方案三，垂直布局方案二

   

       

   

1.4 중앙 레이아웃에 flex 사용

분석: flex를 사용하면 수평 및 수직 센터링이 매우 쉬워집니다. 기본적으로 align-items: 중앙 및 수직 센터링(교차 축 배열), 양쪽 정렬이 가능합니다. -content: 중앙 수평 중앙(주축 배열) 참고: 브라우저 호환성 문제를 고려해야 합니다.

위 내용은 CSS 레이아웃 지침의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!