css布局：水平和垂直方向都居中，以及用flex实现

最新推荐文章于 2023-01-11 11:33:44 发布

原创最新推荐文章于 2023-01-11 11:33:44 发布 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#CSS3水平垂直居中 #css布局 #css

CSS 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了CSS布局中实现元素水平和垂直居中的方法，包括使用justify-content和align-items属性进行主轴和交叉轴的对齐设置，以及针对多根轴线的align-content属性。通过这些属性，可以灵活地调整元素在容器内的位置，实现各种居中效果。

 position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) !important;
//或
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);

2.flex

水平方向居中

display: flex;

justify-content:center;

垂直方向居中

align-items:center

注：用了flex，再用float ，text-align：center..会不起作用

参考

3.4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。


.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

3.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。


.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

3.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。


.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}