css 居中

阅读目录

水平居中
垂直居中
水平&垂直居中

水平居中

1 行内块居中
设置父元素的 text-align: center

2 块级元素
设置当前块级元素(宽度) margin: 0 auto;

3 绝对定位
元素有宽度的情况下 left0/right0 margin: 0 auto;

4 flex
justify-content: center

垂直居中

1 绝对定位
元素有高度的情况下, top/bottom/margin: auto 0;

2 flex 布局
align-items: center; 变为包含块

3 transfrom
trnaslate(0, -50%)

垂直居中: position 绝对定位演示

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
  <style>
    /* position relative 相对 absolute 绝对 fit-content自动调整*/
    .container {
      position: relative;
      height: 300px;
      background-color: orange;
    }
    .container .box1 {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto 0;
      
      width: 100px;
      /* height: 100px; */
      height: fit-content;
      background-color: red;
    }
  style>
head>
<body>
   
   <div class="container">
      <div class="box1">box1div>
      123
   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
31
32
33
34
35

垂直居中: flex 演示

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
  <style>
    .flex-container {
      display: flex;
      align-items: center;
      height: 300px;
      background-color: pink;
    }
    .flex-container .box {
      background-color: red;
    }
  style>
head>
<body>
   
    <div class="flex-container">
      <div class="box">123div>
    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

垂直居中: transform 演示

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
  <style>
    .transform-container {
      height: 300px;
      background-color: orange;
    }
    .transform-container .box {
      display: inline-block;
      height: 100px;
      background-color: #f00;
      /* 
        1. 让元素向下位移父元素的50%
        2. 让元素向上位移自身的50%
      */
      /* margin-top: 50%; 的百分比是相对于包含块(父元素)的宽度 */
      /* margin-top: 50%; */
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      transform: translate(0 ,- 50%);
    }
  style>
head>
<body>
   
  <div class="transform-container">
    <div class="box">coderwhydiv>
    123
  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
31
32
33

水平&垂直居中

flex 1

DOCTYPE html>
<html lang="en">
<head>
  <style>
    body {
      display: flex;
      height: 100vh;
    }

    .test {
      margin: auto;
      background-color: red;
    }
  style>
head>
<body>
  <div class="test">我是水平垂直居中元素div>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

flex 2

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
  <style>
    .test {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: skyblue;
    }
  style>
head>
<body>
  <div class="test">我是水平垂直居中元素div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

position

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
  <style>
    .test {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: red;
    }
  style>
head>
<body>
  <div class="test">
  我是水平垂直居中元素
  transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
  translate 就是平移是同时设置  translateX  和 translateY。
  div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

相关阅读:
人工智能迷惑行为大赏
当新技术开始成熟，特别是AI、区块链、虚拟现实等新技术不断地扩大范围
sql常用语法记录
【leetcode10-21】子串、普通数组、矩阵
二十三、【五种图层】
LVS部署-DR集群
Flask框架——Flask-SQLite数据库
【Turtle合集】火遍抖音的五款魔法阵终于被我找到了（初代萌王，童年的小樱回来了）
【软件工程】软件工程定义、软件危机以及软件生命周期
js检索（捕获）字符串中的正则表达式的匹配exec的使用

原文地址：https://blog.csdn.net/weiguang102/article/details/127629831