对于居中布局的简单实现方式：1.flex布局 2.定位布局

最新推荐文章于 2023-02-26 11:46:57 发布

yang.ing

最新推荐文章于 2023-02-26 11:46:57 发布

阅读量250

点赞数 1

分类专栏：前端面试知识点文章标签： css html css3

本文链接：https://blog.csdn.net/qq_46030564/article/details/123049553

版权

前端面试知识点专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wai{
      width: 200px;
      height: 200px;
      background: blue;
      border: 1px ;
           /* 第一种方法使用flex布局 */
           /* display: flex;
           align-items: center;
           justify-content: center; */


           /* 第二种方法使用定位布局 */

           position: relative;
    }
    .nei{
      width: 100px;
      height: 100px;
      background: aqua;
      
      
      /* 第二种方法使用定位布局 */
      position: absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);

    }
  </style>
</head>
<body>
    <div class="wai">
      <div class="nei">
      </div>
    </div>
</body>

</html>

flex布局

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

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

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

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

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

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

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

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

定位布局

relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。

absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。

yang.ing

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
对于居中布局的简单实现方式：1.flex布局 2.定位布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .wai{ width: 200px; .
复制链接

扫一扫