CSS水平垂直居中的几种方式(flex/position:absolute/table-cell/grid)

最新推荐文章于 2024-12-03 18:59:15 发布

原创最新推荐文章于 2024-12-03 18:59:15 发布 · 342 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

本文介绍了如何使用CSS的flexbox、绝对定位、table-cell和grid布局来实现HTML元素在页面上的水平垂直居中，包括justify-content,align-items,absolute,translate等技术的应用。

在这里插入图片描述

首先是html

<html>

<head>
  <title>水平垂直居中</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body class="container">
  <!-- <div class="container"> -->
    <div class="centered-element">sdadasd</div>
  <!-- </div> -->

</body>
</html>

/* 水平垂直居中 */
/* 1.flex，body元素的话就不需要vw,vh*/
/* .container {
  display: flex;
  justify-content: center;  
  align-items: center;
  width: 100vw;
  height: 100vh;
} */

/* 2.absolue+translate */
/* .container{
  position: relative;
} */

/* 完成之前top，left，仅仅是元素的左上角定位在中心。还需transform将元素的自身高度，宽度一般向左上偏移才能完全实现*/
/* .centered-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} */

/* 3.tabl-cell */
/* .container{
  display: table;
  width: 100vw;
  height: 100vh;
}

.centered-element {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
} */

/* Grid */
/* .container{
  display: grid;
  place-items: center;
} */

.container{
  display: grid;
  place-items: center;
}