盒子实现水平居中

最新推荐文章于 2025-03-18 22:30:33 发布

原创

最新推荐文章于 2025-03-18 22:30:33 发布 · 2.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#三种方法实现盒子的水平居中

本文介绍了五种方法实现盒子内容的水平居中，包括使用text-align:center, margin:0 auto, margin-left:auto, margin-right:auto等。并提供了一个个人作业的链接，展示了三种方式实现盒子水平居中的实际效果。" 137957987,11313158,GBase 8c数据库特性详解及模拟试题,"['数据库', '分布式数据库', 'GBase 8c']

有兴趣的可以看我的github地址：https://github.com/wangzhichao2019/-web-

①text-align:center;可以实现盒子里面的内容（文字，行内元素，行内块元素）居中对齐
②margin：0 auto;表示的是盒子的左右是auto（自动）的，距离上边框的距离是0
③margin-left:auto;表示盒子整体左边区域充满，盒子整体效果是在右边
④margin-right:auto;表示盒子右边区域自动充满，盒子紧靠左边（和浏览器默认界面是一样的）
⑤在盒子里面不更改样式的话，盒子里面的内容是和浏览器一样宽的

一、笔记：

<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset = "utf-8">
	<title>2019年9月7日</title>
	<style>
		div
		{
			text-align:center;/
			width: 300px;
			height: 100px;
			background-color: pink;/*现在可以看到文字依然是居中的,但是盒子并不是居中的*/
			margin: 0 auto;
			padding-top: 100px;
			/*margin-left: auto;   margin-right:auto;*/
			/*
			 所以，水平居中的另一种实现方法是将上面的两种都写上：
			 margin-left:auto；
			 margin-right：auto；
			 也就是意味着左右两侧都自动充满，所以最后盒子的实现效果是居中对齐，而且距上边的距离不限于0
			 (所以让一个盒子水平居中，最重要的就是让盒子的左右auto就好了margin：100 auto；也能实现）
			 *

最低0.47元/天解锁文章