写在前面:此贴为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;}}