css中如何实现帧布局_css布局和居中的简单实现

Css的布局格式

• 一列式：

一列式布局是最基本的布局方式，通过直接创建一个div就可以实现。图中有两种一列式的样式，分别是宽度自适应屏幕（这是默认的块级元素的属性）；另外一种是依据文档内容来填充宽度（通过设置float属性来实现）

• 二列式：

二列式，即左右布局。实现方式可以通过设置box1（float），box2(可以使用float，也可以直接设置margin-left>=box1的宽度来实现{这是为了避免重合})

• 三列式：

三列式的实现和二列式相同，可以将box1、box2（float属性），box3(可以设置float，也可以设置margin-left>=box1+box2的宽度{这是为了避免重合})

三列式自适应布局：

三列式可以设置中间（box2）为自适应的形式，主要是设置box3的margin-top=box2的宽度。

css的居中方式

1、水平居中

• 内联元素的居中可以使用text-align:center属性。
• 单个块级元素的居中可以设置margin:0 auto或者margin-left:auto/margin-right:auto来实现。
• 多个块级元素居中可以将块级元素包裹在一个块级元素中，然后设置这个块级元素为display:inne-block，同时设置父级容器text-align:center来实现。

2、垂直居中

• 使用table标签，table标签内的td标签内的内容默认垂直居中
• 使用定位的方式，首先父级盒子相对定位，子盒子绝对定位。(1)top和left设置为50%，translate(50%)。（2）margin：auto
• 使用flex布局：align-item：center、justify-content：center

好了，上面就是实现居中和布局的简单方式，欢迎各位补充。