静态页面布局中通过css控制盒子居中的常用方法。
在静态页面不居中,总会遇到许许多多的居中布局,在导航条、图文解说等,都需要用居中(本文说的居中为垂直和水平都是居中的),在此整理出四种居中的方法,提供参考。
f话不多说,先上基本代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子居中</title>
<style>
/* 去除默认样式 */
* {
margin: 0;
padding: 0;
}
.box1 {
/* margin: 100px auto;
为了让盒子在中间显示,容易看出效果 */
margin: 100px auto;
width: 400px;
height: 400px;
border: 2px solid red;
}
.box2 {
width: 200px;
height: 200px;
border: 2px solid orange;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<!-- <span></span> -->
</div>
</body>
</html>
第一种:使用margin、padding的方法。
在知道盒子具体宽高数值的时候,使用margin值时居中时 ,注意高度塌陷的问题,高度塌陷的引起以及解决办法,可以作为一个专题来写的了,在此不做过多解释,本文给盒子加边框,也是为了防止高度塌陷(子元素有margin-top值时,父元素也会跟着一起margin-top下来,给父元素增加边框可以解决塌陷问题。)
使用margin方法居中代码。
.box2 {
margin:100px;
}
(400-200)/2=100 所以设置margin为100px,或者给父元素设置padidng值, 在此又要分为两种情况,标准盒子模型 box-sizing: content-box; 和 怪异盒子模型 box-sizing: border-box; 那么,什么又是标准盒子、什么又是怪异盒子呢。简单的来说,标准的盒子增加padding和border(边框)值会改变盒子在可视化界面(浏览器)中的大小,然而怪异盒模型中无论怎么改变padding、border的值,在浏览器中的盒子的宽高即为在也页面布局时给定的width和height。总而言之,及其不建议使用这种方法,还需要去测量margin、padding的值,极其麻烦!!
第二种:定位的方法
直接看代码吧。
.box2{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
定位的有三种,relative(相对定位) absolute(绝对) fixed(固定) 参考点是子元素的左上角的点,因此在距离top、left边50%的时候还需要box2移动自身的50%才能让两个框的中心重合。注意:子绝父相,绝对定位是以最近的那个非静态static定位的容器为标准使用的。
拓展 :盒子永远处于居中位置,加在需要居中的元素中
position: fixed;
top: 0;
bottom: 0;
eft: 0;
right: 0;
margin: auto;
第三种的方法:弹性盒的方法(最简单的,推荐使用)
弹性盒布局,移动端页面多用的方法,代码量少,效果明显。
.box1{
display: flex;
justify-content: space-around;
align-items: center;
}
第四种方法:在给需要居中的元素增加一个空的兄弟元素方法
这种方法比较麻烦,需要写的样式比较多。
给需要居中的box2元素设置样式
display:inline-block;
vertical-align :middle;
父元素box1设置:
text-align: center;
font-size: 0px;
font-size: 0px; 原因是结构导致,结构之间会有一个空格,一个空格也就是会占据一个字符的空间,一般情况下根字符的大小默认是:16px的,只有设置他为0px才能做到真正居中,而不是视觉上的居中。
对新增的元素设置,其实学到后面可以通过伪元素(::after ::before)的方法增加元素。
span{
display:inline-block;
width: 0px;
height: 100%;
vertical-align :middle ;
}
到此就完成了居中的设置。
拓展:单纯的想让字体在一个容器居中,有以下两种方法可以快速实现。
*弹性盒布局,
*text-align:center; line-height:height值
padding值的方法也是可以的,但是也是需要去测量,及其麻烦。。。到此就结束了本文的分享,欢迎各位大佬指导。