css 各种居中

1. 内部容器居中 flex

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<style>

body {
  width: 100vw;
  height: 100vh;
}

.parent{
  width: 100%;
  height: 100%;
  background-color: #E2A1E266;
  
  /* 弹性布局，使内部的容器居中 */
  display: flex;
  flex-direction: row;
  /* 下面这俩是水平居中还是竖直居中取决于上面的 flex-direction 是row 还是column */
  align-items: center;
  justify-content: center;
}

.child{
  background-color: #A2A1E266;
}

</style>
<body>
  <div class="parent">
    <div class="child">
      这是一个需要居中显示的div
    </div>
  </div>
</body>
</html>

Result：

flex居中

2. 文字居中 text-align

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body style="width:100vw; height: 100vh; background-color: #9999DC80">
  <div style="width: 80px; text-align: center; background-color: #DC999980">
    <span>这是一段测试文字居中的</span>
  </div>
</body>
</html>

Result:

text-align

NOTICE

未完待续

posted @ 2023-03-16 10:24  echo_lovely  阅读(11)  评论(0)  编辑  收藏  举报