CSS3盒子居中模型,如何让盒子居中。

人生的方向随自己而走

已于 2022-11-07 18:38:53 修改

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： 2023年前端项目空间 2022年Java空间 HTML5+CSS 文章标签： css

于 2022-04-09 18:44:27 首次发布

本文链接：https://blog.csdn.net/qq_56248592/article/details/124065599

2022年Java空间同时被 3 个专栏收录

276 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

2023年前端项目空间

130 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

HTML5+CSS

45 篇文章

订阅专栏

本文详细介绍了CSS3中实现盒子居中的五种不同方案，包括代码实例，帮助开发者掌握各种情况下的居中技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

盒子居中的几种方案。

No1:请看第一种方案。

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQExpdmVAQW5kQExlYXJuQCM=,size_20,color_FFFFFF,t_70,g_se,x_16

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
	*{
		font-size: 1.875rem;
	}
        div:nth-child(1){ 
            height: 200px;
            width: 300px;
            background-color:red;
            position: absolute;
            left: 50%;

        }
        div:nth-child(3){
            height: 200px;
            width: 300px;
            background-color: