html元素居中_居中代码-CSDN博客

本文链接：https://blog.csdn.net/qq_25775675/article/details/124760951

本文详细介绍了CSS中实现元素水平居中、垂直居中以及水平垂直居中的多种方法，包括Bootstrap的类使用、flex布局、绝对定位、margin负值、css3 transform和table-cell方式。同时提供了不同场景下的实战案例，如全屏居中和动态居中。

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

一、水平居中

// 文本：
class ="text-center"
// 图片居中：
class = "center-block"

// 其他元素：
// bootstrap3水平居中：利用bootstrap列偏移
class = "col-md-offset-4 col-lg-offset-4col-xl-offset-4"
// bootstrap4水平居中：
class = "m-auto"

二、垂直居中

1、Bootstrap3

Bootstrap的栅格系统使用的是float：left的浮动方式，vertical-align属性不起作用，故把内部div的float属性清除，添加display属性，如下：

.middle {
   float: none;
   display: inline-block;
   vertical-align: middle;
}

2、Bootstrap4

以下三个class都可以实现垂直居中。

<div>
    <div class="align-self-center">align-self-center</div>
    <div class="align-items-center">align-items-center</div>
    <div class="justify-content-center">justify-content-center</div>
</div

三、水平垂直居中（纯css实现）

1、flex 布局方式

.context-center{
	display: flex;
	justify-content: center;
	align-items: center;
}

（1）案例一

代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.test-div{
			width: 100px;
			height: 100px;
			background: #eee;
			margin: 0px 20px;
		}
		.context-center{
			display: flex;
			justify-content: center;
			align-items: center;
		}
	</style>
</head>
<body>
	文字居中
	<div class="context-center test-div" >
		name
	</div>
	
	div居中
	<div class="context-center test-div">
		<div style="height: 50px;width: 50px;background: palegreen;">
			
		</div>
	</div>
</body>
</html>

效果
在这里插入图片描述

（2）案例二

全屏居中，适合做登录框。

代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.test-div{
			position: absolute;
			width: 100%;
			height: 100%;
			background: #ccc;
		}
		.context-center{
			display: flex;
			justify-content: center;
			align-items: center;
		}
	</style>
</head>
<body>
	<div class="test-div context-center">
		<div style="height: 200px;width: 400px;background: palegreen;">
			
		</div>
	</div> 
</body>
</html>

效果
在这里插入图片描述

2、绝对定位（常用于登录模块）

备注：前提条件div需要有宽高

（1）案例一

代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
	.box{
		position:absolute;
		left:0;
		right:0;
		top:0;
		bottom:0;
		margin:auto;
	}
    </style>
</head>
<body>
	<div style="width:500px;height: 300px; background: #ccc;position: absolute;">
		<div class="box" style="width: 200px;height: 100px;background: palegreen;">
		
		</div>
	</div>
</body>
</html>

效果
在这里插入图片描述

3、margin负值

备注：前提条件div需要有宽高

#html
<div class="box"></div>
#css
.box{
width:200px;
height: 200px;
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}

4、css3 transform

备注：用于不确定当前div的宽度和高度

#html
<div class="box"></div>
#css
.box{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}

5、table-cell 方式

#html
<div class="box">
<div class="child">child</div>
</div>
#css
.box{
display: table-cell;
vertical-align: middle;
text-align: center;
}

6、js实现

代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>块元素DIV-垂直/水平居中（动态）</title>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //当调整浏览器窗口的大小时，发生 resize 事件
            $(window).resize(function () {
                $(".mydiv").css({
                    position: "absolute",
                    left: ($(window).width() - $(".mydiv").outerWidth()) / 2,
                    top: ($(window).height() - $(".mydiv").outerHeight()) / 2
                });
            });
            $(function () {
                $(window).resize();
            });
        });
        $(function () {//当页面刷新时，发生resize事件（可删除这三行程序，自己测试一下）
            $(window).resize();
        });
    </script>
</head>
<body>
	<div class="mydiv" style="width: 200px;height: 100px;background: palegreen;">
		
	</div>
</body>
</html>