css：居中的几种布局方式

居中布局的方式

初始状态

DOCTYPE html>
<html lang="en">
<head>
    <style>
        .outer {
            width: 100px;
            height: 100px;
            border: 1px solid #f00;
        }
        .inner {
            width: 30px;
            height: 30px;
            background-color: #000;
        }
    style>
head>
<body>
    <div class="outer">
        <div class="inner">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

在这里插入图片描述

1、普通方式

定宽
水平居中

.inner {
	margin: 0 auto;
}
1
2
3

文本水平居中，对行内元素/行内块级元素有效

text-align: center;
1

文本垂直居中，这两个属性设置一样大小

height: 30px;
line-heigth: 30px;
1
2

2、定位

定宽

DOCTYPE html>
<html lang="en">
<head>
    <style>
        .outer {
            width: 100px;
            height: 100px;
            border: 1px solid #f00;
            // 新增
            position: relative;
        }
        .inner {
            width: 30px;
            height: 30px;
            background-color: #000;
            // 新增
            position: absolute;
            left: 50%;
            top: 50%;
            // height的一半
            margin-top: -15px;
            // width的一半
            margin-left: -15px;
        }
    style>
head>
<body>
    <div class="outer">
        <div class="inner">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
31
32

支持宽高未知

DOCTYPE html>
<html lang="en">
<head>
    <style>
        .outer {
            width: 100px;
            height: 100px;
            border: 1px solid #f00;
            // 新增
            position: relative;
        }
        .inner {
            width: 30px;
            height: 30px;
            background-color: #000;
            // 新增
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    style>
head>
<body>
    <div class="outer">
        <div class="inner">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

在这里插入图片描述

3、flex

支持宽高未知

.outer {
    display: flex;
    justify-content: center;
    align-items: center;
}
1
2
3
4
5

4、网格布局grid

支持宽高未知
可以看我的这篇 css：网格布局

.outer {
    display: grid;
    justify-content: center;
    align-items: center;
}
1
2
3
4
5

5、表格布局

支持宽高未知

DOCTYPE html>
<html lang="en">
<head>
    <style>
        .outer {
            width: 100px;
            height: 100px;
            border: 1px solid #f00;
            display:table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .inner {
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #000;
        }
    style>
head>
<body>
    <div class="outer">
        <div class="inner">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

总结

方式一：定宽居中适合
方式二：能不用尽量不用，因为 position: absolute; 会脱离文档流，除非那种确实要脱离文档流的布局再用
方式三：常用
方式四：兼容性不如方式三
方式五：需要兼容IE的才使用

相关阅读:
SaaSBase：UiPath是什么？
Map集合保存数据库
一文搞懂ES6基本全部语法
【COMP305 LEC 5】
【C++】STL容器适配器栈和队列及优先队列&容器适配器
UE5的蓝图节点拷贝到UE4后连线和属性值全部丢失了
PGL图学习之项目实践(UniMP算法实现论文节点分类、新冠疫苗项目实战，助力疫情)[系列九]
HttpUtils工具类
Android学习笔记 1.1 Android的发展和历史
Linux编程基础：1~6章实训编程题

原文地址：https://blog.csdn.net/weixin_43972437/article/details/127772142