CSS Layout Guidelines

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 Use flex for centered layout

Analysis: Using flex, horizontal and vertical centering will become very easy. By default, align-items: center Vertically centered (cross-axis arrangement), justify-content: center horizontally centered (main-axis arrangement) Note: Browser compatibility issues need to be considered.

;

;

;

The above is the detailed content of CSS Layout Guidelines. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn