【温故知新】CSS学习笔记（盒子水平居中方法）

CSS盒子水平居中

比如有一个DIV盒子，如果不给任何样式，默认的宽度是和浏览器一样宽的（如下图所示）。

那么若要让盒子里面的内容居中对齐，我们可以设定如下样式：

div {

text-align: center;

}

这里的内容包括文字、行内元素、行内块元素。

盒子本身是可以指定宽度和高度的，我们可以设定如下样式：

div {

text-align: center;

width: 300px;

height: 100px;

background-color: deeppink;

}

这里我们可以发现盒子里面的内容对于盒子而言是居中对齐的，但是盒子本身对于页面而言却不是居中对齐的。

接下来就是本节需要介绍的——如何让盒子水平居中？

可以在样式中如下进行设置：

div {

text-align: center;

width: 300px;

height: 100px;

background-color: deeppink;

margin: 0 auto; /*上下是0，左右是自动*/

}

或者

div {

text-align: center;

width: 300px;

height: 100px;

background-color: deeppink;

margin-left: auto;

margin-right: auto;

}

或者

div {

text-align: center;

width: 300px;

height: 100px;

background-color: deeppink;

margin: auto;

}

上述三种方式效果都是一样的，所以以后我们见到了千万不要慌张。

总结1：

文字水平居中我们用 text-align: center;

盒子水平居中我们用 margin: 0 auto;

总结2：

可以让一个盒子实现水平居中，需要满足以下两个条件：

1、必须是块级元素；

2、盒子必须指定宽度（Width）；

然后就给左右的外边距都设置为auto，就可以使块级元素水平居中。

实际工作中常用这种方式进行网页的布局。

【完整样式代码】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子水平居中</title><style>div { text-align: center; /*盒子的内容居中对齐*/width: 300px;height: 100px;background-color: deeppink;margin: 0 auto; /*上下是0，左右是自动*/margin-left: auto;margin-right: auto;}</style>
</head>
<body><div>盒子</div>
</body>
</html>

【温故知新】CSS学习笔记（盒子水平居中方法）相关推荐

CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
CSS学习笔记（详细）- 基础
CSS学习笔记从零开始代码风格样式书写格式 CSS基础选择器 css选择器的作用:(选择标签用的) 选择器分类:基础选择器和复合选择器基础选择器标签选择器类选择器 - 开发最常用多类名 i ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS学习笔记（狂神-完整版）
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中背景图片 ie6 ie7 margin 杂谈分类: 网页制作 1.IE6中用了float之后导致m ...
CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型外边距margin 内边距padding 背景background 背景图background-image 边框border 样式宽度颜色圆角边框图片border- ...
CSS学习笔记——精灵图(sprite)
CSS学习笔记目录一.什么是精灵图? 二.精灵图的优点三.精灵图的基本用法 1.打开ps导入精灵图 2.测量字母的大小及坐标 3.效果图 4.代码实现总结一.什么是精灵图? 所谓精灵图就是图片 ...
CSS 学习笔记 - 网格布局（栅格系统）
CSS 学习笔记 - 网格布局(栅格系统) 开启网格模式基本概念属性说明容器属性内容属性效果展示 grid-template-rows.grid-template-columns 基本用法 ...

【温故知新】CSS学习笔记（盒子水平居中方法）

CSS盒子水平居中

【温故知新】CSS学习笔记（盒子水平居中方法）相关推荐

最新文章

热门文章