物流大超市

标题: 解析前端制作之纯CSS现垂直水平居中 [打印本页]

作者: kaixun 时间: 2023-2-23 20:54
标题: 解析前端制作之纯CSS现垂直水平居中

在前端日常代码编写中，经常需要一些居中方式，下面有几种常用方法，让红色方块垂直水平都居中于黑色方块里。

公司网站的相关资讯可以到我们网站了解一下，从专业角度出发为您解答相关问题，给您优质的服务！

1利用弹性布局

F是FB的缩写，意为弹性布局，用来为盒状模型提供比较大的灵活性。

首先是作为弹性布局的容器的属性。

1-属性

-决定了容器的方向。

{

-:|-||-;

}

四个值分别为：(默认值)从左向右、-从右向左、从上到下、-从下到上。

2-属性

默认情况下的布局一般在同一行，当设置了-属性之后将自动将排列不下的内容进行换行。

{

-:||-;

}

四个值分别为：(默认值)不换行、向下换行、-向上换行。

3-属性

-属性是以上两种属性的简写形式，默认值是。

{

-:-||-;

}

4-属性

-属性定义了在容器方向上的对齐方式。

{

-:-|-||-|-;

}

-(默认值)：向左对齐。

-：向右对齐。

：居中对齐。

-：两端对齐，每一个子元素等距离间隔，子元素与容器边框间隔。

-：每个子元素两侧的间隔相等。子元素之间的间隔比子元素与容器边框的间隔大一倍。

5-属性

-属性定义在垂直容器方向上的对齐方式。

{

-:-|-|||;

}

-：垂直方向的起点对齐。

-：垂直方向的终点对齐。

：垂直方向的中点对齐。

:与首个子元素中文字的基线对齐。

(默认值)：如果子元素没有设置高度或者高度设为，那么它将占满整个容器的高度。

6-属性

-属性定义了子元素两种方向上的对齐方式。

{

-:-|-||-|-|;

}

-：当容器方向子元素刚好填满时，与垂直方向的起点对齐。

-：当容器方向子元素刚好填满时，与垂直方向的终点对齐。

：当容器方向子元素刚好填满时，与垂直方向的中点对齐。

-：当容器方向子元素刚好填满时，垂直方向两端对齐，子元素之间的等距离间隔。

-：两个方向两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

（默认值）：占满整个垂直方向。

任何一个容器都可以指定为F布局。

指定F的写法为：:

接着添加横向居中属性：-:

垂直居中属性：-:

即可使红色方块居中于黑色方块

2利用定位现居中

先将父元素的设置为,然后设置子元素的为;这样可以使子盒子根据父盒子的位置进行定位。

子元素还需设置:0;:0;:0;:0;:,即可居中于黑色方块。

欢迎光临物流大超市 (https://www.9999956.com/bbs/)