CSS02_设置盒子水平+垂直居中设置文本水平+垂直居中

写在前面：此贴为CSS高频题，针对盒子模型的水平+垂直居中，还提到了其内部文字的居中，如有补充，请留下评论

HTML代码结构：

<body><div class="box-warpper"><div class="box"></div></div>
</body>
<style>
/* CSS预设，提前将不相关的基本样式写在这里，为了使得后面代码更清晰*/
*{margin: 0;padding: 0;box-sizing: border-box;
}
html, body {height: 100%;background-color: #ccc;
}
.box-warpper {height: 100%;border: 2px solid green;
}
.box-warpper .box {width: 200px;height: 200px;background-color: red;
}
</style>

一、设置盒子水平 + 垂直居中

法1 - flex布局（最简单）

父元素开启flex定位，并使用justify-content和align-items

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

法2 - absloute 绝对定位（含两种定位方式）

子绝父相 + top | right + transform
子绝父相 + top | right | bottom | left + margin:auto

/*其他基本样式上面已写，这里只写定位相关代码，后续不再赘述*/
.box-warpper {position: relative;
}
.box-warpper .box {position: absolute;/* 定位方式 1 */top: 50%;left: 50%;transform: translate(-50%, -50%);/* 定位方式 2 */right: 0;left: 0;top: 0;bottom: 0;margin: auto; /*必须有auto，否则不生效*/
}

效果：

法3. 栅格布局 grid

父元素加入栅格，子元素margin: auto

.box-warpper {display: grid;
}
.box-warpper .box {/* margin: 0 auto; 水平居中*/
/* margin: auto 0; 垂直居中*/margin: auto; /*水平+垂直居中*/
}

法4. table-cell布局（不常用）

父元素必须设置宽高，不能用百分比。
父元素设置table-cell布局，文本水平居中，垂直居中
子元素设置margin：auto

.box-warpper {width: 500px;height: 500px;display: table-cell;text-align: center;vertical-align: middle;
}
.box-warpper .box {margin: auto;
}

二、设置盒子内文本水平 + 垂直居中

HTML结构：

<body><div class="box"><span>我是单行文本</span></div>
</body>

1. 文本水平居中

让div中文字水平居中：text-align: center; 即可

2. 文本垂直居中

2.1 单行文本垂直居中

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要

设置它的实际高度height和所在行的高度line-height相等即可

  .box{height: 100px;line-height: 100px;}

2.2 多行文本固定高度的居中

CSS中的确是有vertical-align属性，但是它只对HTML元素中拥有valign特性的元素才生效，例如表格元素中的"td"、“th”、“caption"等，而像"div”、"span"这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。

但是在CSS中还有一个display:table，所以我们可以使用这个属性来让"div"模拟"table"就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上。

  .box{/* 子元素相关信息 */width: 100%;height: 100%;background-color: red;/* 设置定位相关 */display: table;span{text-align: center;display: table-cell;vertical-align: middle;}}

CSS02_设置盒子水平+垂直居中设置文本水平+垂直居中相关推荐

关于css设置盒子模型，设置像素与实际像素不同的问题
关于css设置盒子模型,设置像素和实际像素不同的问题写网页时,发现自己网页设置盒子像素和实际用ps量的像素不同.盒子模型的margin和padding也对,网页的缩放也时100%,但就是不同. 分析 ...
html怎么水平居中垂直居中,css水平居中和垂直居中的几种解决方案
有时候,为了前端设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字:方法有不少,设计蜂巢就为大家介绍几种CSS水平和垂直居中的方法. 一.水平居中1. ...
html设置盒子水平垂直居中,盒子水平垂直居中10种方法
盒子水平垂直居中10种方法 HTML代码第一种:通过绝对定位的方式 absolute + 负margin 首先知道子元素的宽高,给子元素设置top:50%:left:50%, 但绝对定位是基于子元素 ...
文本样式设置/盒子模型学习笔记
一.记单词.复习前一天的学习内容.讲解练习作业. 二.转义字符 http://tool.oschina.net/commons?type=2 (转义字符的链接) 三.文本样式设置 1.text-ind ...
设置行内元素宽高和背景色后，行内元素文本不水平垂直居中解决方案
前言行内元素:指在同一行内不自动换行,可以和其他行内元素在同一水平的元素,不可以设置宽高. 行内元素设置宽高:行内元素想要设置宽高,需要用display:inline-block设置(详解如下表). ...
html css实现文本水平垂直居中显示
这几天在工作中遇到了一个小问题:文本内容怎么能在div里水平垂直居中显示呢?同时群里的小伙伴恰巧也有提问这个问题的,所以我就总结了一下我知道的方法. 一.利用行高(line-height)和verti ...
Android TextView 设置文字上下距离以及文字水平间距
设置文字上下的间距的方法:lineSpacingExtra 设置文字水平的间距的方法:letterSpacing 没有设置之前的效果图设置之后的效果图属性下面给出,可以复制过去修改自己想要的距离 ...
Web前端线上系统课-01-HTML+CSS/06-CSS盒子模型-CSS设置背景
CSS盒子模型-CSS设置背景盒模型 margin <!DOCTYPE html> <html lang="en"><head><met ...
网页的盒子模型是什么？怎么设置盒子样式
网页的盒子模型是什么?怎么设置盒子样式欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树S ...

CSS02_设置盒子水平+垂直居中设置文本水平+垂直居中

一、设置盒子水平 + 垂直居中

法1 - flex布局（最简单）

法2 - absloute 绝对定位（含两种定位方式）

法3. 栅格布局 grid

法4. table-cell布局（不常用）

二、设置盒子内文本水平 + 垂直居中

1. 文本水平居中

2. 文本垂直居中

2.1 单行文本垂直居中

2.2 多行文本固定高度的居中

CSS02_设置盒子水平+垂直居中设置文本水平+垂直居中相关推荐

最新文章

热门文章

CSS02_设置盒子水平+垂直居中 设置文本水平+垂直居中

一、设置盒子水平 + 垂直居中

法1 - flex布局（最简单）

法2 - absloute 绝对定位（含两种定位方式）

法3. 栅格布局 grid

法4. table-cell布局（不常用）

二、设置盒子内文本水平 + 垂直居中

1. 文本水平居中

2. 文本垂直居中

2.1 单行文本垂直居中

2.2 多行文本固定高度的居中

CSS02_设置盒子水平+垂直居中 设置文本水平+垂直居中相关推荐

最新文章

热门文章

CSS02_设置盒子水平+垂直居中设置文本水平+垂直居中

CSS02_设置盒子水平+垂直居中设置文本水平+垂直居中相关推荐