css实现水平垂直居中的七种方式

一、使用grid布局
二、使用flex布局
三、使用定位+外边距
四、使用定位+平移
五、使用外边距 + 平移
六、使用文本对齐 + 行高
七、使用表格单元

一、使用grid布局

DOCTYPE html>
<html lang="en">
  <head>
    <title>testtitle>
    <style>
      #outside {
        width: 200px;
        height: 200px;
        background: #000;
        display: grid;
        place-items: center;
        /* place-items等于justify-items:center; +  align-items:center;*/
      }
      #inside {
        width: 50px;
        height: 50px;
        background: #96f2d7;
      }
    style>
  head>
  <body>
    <div id="outside">
      <div id="inside">div>
    div>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这里插入图片描述

二、使用flex布局

DOCTYPE html>
<html lang="en">
  <head>
    <title>testtitle>
    <style>
      #outside {
        width: 400px;
        height: 400px;
        background: #000;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      #inside {
        width: 100px;
        height: 100px;
        background: #ffc9c9;
      }
    style>
  head>
  <body>
    <div id="outside">
      <div id="inside">div>
    div>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这里插入图片描述

三、使用定位+外边距

DOCTYPE html>
<html lang="en">
  <head>
    <title>testtitle>
    <style>
      #outside {
        width: 300px;
        height: 300px;
        background: #000;
        position: relative;
      }
      #inside {
        width: 100px;
        height: 100px;
        background: #eebefa;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        margin: auto;
      }
    style>
  head>
  <body>
    <div id="outside">
      <div id="inside">div>
    div>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在这里插入图片描述

四、使用定位+平移

DOCTYPE html>
<html lang="en">
  <head>
    <title>testtitle>
    <style>
      #outside {
        width: 200px;
        height: 200px;
        background: #000;
        position: relative;
      }
      #inside {
        width: 50px;
        height: 50px;
        background: #a5d8ff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    style>
  head>
  <body>
    <div id="outside">
      <div id="inside">div>
    div>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在这里插入图片描述

五、使用外边距 + 平移

DOCTYPE html>
<html lang="en">
  <head>
    <title>testtitle>
    <style>
      #outside {
        width: 200px;
        height: 200px;
        background: #000;
        overflow: hidden;
        /* overflow: hidden;是为了防止父子元素的margin-top重合 */
      }
      #inside {
        width: 50px;
        height: 50px;
        background: #ffffb8;
        margin: 50% auto;
        transform: translateY(-50%);
      }
    style>
  head>
  <body>
    <div id="outside">
      <div id="inside">div>
    div>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

在这里插入图片描述

六、使用文本对齐 + 行高

DOCTYPE html>
<html lang="en">
  <head>
    <title>testtitle>
    <style>
      #outside {
        width: 200px;
        height: 200px;
        background: #000;
        text-align: center;
        line-height: 200px;
        vertical-align: middle;
      }
      #inside {
        color: #e9ecef;
        display: inline;
      }
    style>
  head>
  <body>
    <div id="outside">
      <div id="inside">只适用于行内元素div>
    div>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在这里插入图片描述

七、使用表格单元

DOCTYPE html>
<html lang="en">
  <head>
    <title>testtitle>
    <style>
      #outside {
        width: 200px;
        height: 200px;
        background: #000;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
      }
      #inside {
        color: #ffdeeb;
      }
    style>
  head>
  <body>
    <div id="outside">
      <div id="inside">只适用于行内元素div>
    div>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在这里插入图片描述

相关阅读:
IDEA 自动生成序列号
 Codeforces Round #771 (Div. 2) D. Big Brush
C语言基础 - 文件编程 —— 概述篇
 OSCP系列靶场-Esay-Dawn
高等数学（第七版）同济大学总习题五（后8题）个人解答
 Vim基础用法，最常用、最实用的命令介绍（保姆级教程）
MyBatis之动态SQL
微信小程序开发的OA会议之会议个人中心的页面搭建及模板，自定义组件的学习
 百度车牌识别AI Linux使用方法-armV7交叉编译
 校园一卡通管理信息系统的设计与实现
原文地址：https://blog.csdn.net/qq_39410252/article/details/126473097