第十五讲_css水平垂直居中的技巧

css水平垂直居中的技巧

  • [1. 水平垂直居中(场景一)](#1. 水平垂直居中(场景一))
  • [2. 水平垂直居中(场景二)](#2. 水平垂直居中(场景二))
  • [3. 水平垂直居中(场景三)](#3. 水平垂直居中(场景三))
  • [4. 水平垂直居中(场景四)](#4. 水平垂直居中(场景四))

1. 水平垂直居中(场景一)

条件 :一个固定大小的div,包含一个固定大小的div

效果 :让内部的div位于外部div水平垂直居中的位置,且内部的div文本水平垂直居中。

注意事项 :父元素的第一个子元素margin塌陷的问题。

html 复制代码
<html>
  <style>
    .outer {
      height: 500px;
      width: 500px;
      background-color: brown;
      margin: 0 auto;
      /* 解决margin塌塌陷问题 */
      overflow: hidden;
    }

    .inner {
      height: 100px;
      width: 100px;
      background-color: aqua;
      /* 设置该元素在父元素中水平居中 */
      margin: 0 auto;
      margin-top: 200px;
      /* 设置该元素中的文本水平居中 */
      text-align: center;
      /* 设置该元素中的文本垂直居中 */
      line-height: 100px;
    }
  </style>

  <div class="outer">
    <div class="inner">hello</div>
  </div>
</html>

2. 水平垂直居中(场景二)

条件 :一个固定大小的div,包含一个行内元素、行内块元素。

效果 :让内部的行内元素、行内块元素都位于外部div水平垂直居中的位置。

注意事项:基线的影响。

html 复制代码
<html>
  <style>
    .outer {
      height: 500px;
      width: 500px;
      background-color: brown;
      /* 设置内部文本或行内元素水平居中 */
      text-align: center;
      /* 设置内部文本或行内元素垂直居中 */
      line-height: 500px;
      /* 为了让其子元素正好垂直居中,没有偏差 */
      font-size: 0;
    }

    .inner {
      background-color: aqua;
      /* 行内元素的基线相对于该元素所在行的基线的垂直对齐 */
      vertical-align: middle;
      font-size: 20px;
    }

    img {
      height: 100px;
      width: 100px;
      vertical-align: middle;
    }
  </style>

  <div class="outer">
    <span class="inner">hello</span>
    <img
      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
    />
  </div>
</html>

3. 水平垂直居中(场景三)

条件:一个伸缩容器。

效果:让伸缩项目在伸缩容器的水平垂直居中位置。

实现方式一:

html 复制代码
<html>
  <style>
    .div1 {
      width: 500px;
      height: 500px;
      background-color: blueviolet;
      /* 设置为伸缩容器 */
      display: flex;
      /* 主轴上居中对齐 */
      justify-content: center;
      /* 侧轴上居中对齐 */
      align-items: center;
    }
    .div2 {
      width: 200px;
      height: 200px;
      background-color: blue;
    }
  </style>

  <div class="div1">
    <div class="div2"></div>
  </div>
</html>

实现方式二:

html 复制代码
<html>
  <style>
    .outer {
      width: 500px;
      height: 500px;
      background-color: blueviolet;
      /* 设置为伸缩容器 */
      display: flex;
    }
    .inner {
      width: 200px;
      height: 200px;
      background-color: blue;
      /* 设置margin为auto,会让伸缩项目水平垂直居中 */
      margin: auto;
    }
  </style>

  <div class="outer">
    <div class="inner"></div>
  </div>
</html>

4. 水平垂直居中(场景四)

条件 :一个固定大小的div

效果 :让div在视口的水平垂直居中位置。

注意事项:视口的大小不固定。

html 复制代码
<html>
  <style>
    body {
      /* 设置body的高度为视口的高度 */
      height: 100vh;
      /* 设置为伸缩容器 */
      display: flex;
    }

    .div1 {
      width: 500px;
      height: 500px;
      background-color: brown;
      /* 垂直水平居中父元素 */
      margin: auto;
    }
  </style>

  <div class="div1"></div>
</html>

代码中vh单位,是相对于视口高度的百分比,更多长度单位介绍可以参考另一篇博文:长度单位介绍

ps:运行代码,无论怎么调整视口的大小,红色块始终位于视口的水平垂直居中的位置。

相关推荐
人工智能训练师5 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny075 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy6 小时前
css的基本知识
前端·css
昔人'6 小时前
css `lh`单位
前端·css
Nan_Shu_6147 小时前
Web前端面试题(2)
前端
知识分享小能手8 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
2501_918126918 小时前
用html5写一个flappybird游戏
css·游戏·html5
蚂蚁RichLab前端团队8 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光9 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5209 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js