外包网站开发合同,重庆市特种作业证报名,公司设计网站推荐,查询网站注册信息1 前言
水平居中、垂直居中是前端面试百问不厌的问题。其实现方案也是多种多样#xff0c;常叫人头昏眼花。
水平方向可以认为是内联方向#xff0c;垂直方向认为是块级方向。
2 内联元素的水平垂直居中
首先#xff0c;常见内联元素有#xff1a;a、span、em、b、stro…1 前言
水平居中、垂直居中是前端面试百问不厌的问题。其实现方案也是多种多样常叫人头昏眼花。
水平方向可以认为是内联方向垂直方向认为是块级方向。
2 内联元素的水平垂直居中
首先常见内联元素有a、span、em、b、strong、i、button。
div classcontainerspan classinnerTextHello,World!/span
/div2.1 display: flex
.container {height: 100px;width: 200px;background-color: cadetblue;display: flex;/* 水平居中 */justify-content: center;/* 垂直居中 */align-items: center;
}2.2 text-alignline-hight
.container {height: 100px;width: 200px;background-color: antiquewhite;/* 水平居中 */text-align: center;/* 垂直居中行高等于高度 */line-height: 100px;
}2.3 text-aligndisplay: table-cell
.container {height: 100px;width: 200px;background-color: antiquewhite;display: table-cell;/* 水平居中 */text-align: center;/* 垂直居中 */vertical-align: middle;
}2.4 display: grid
.container {height: 100px;width: 200px;background-color: antiquewhite;display: grid;place-items: center;
}place-items是align-items、justify-items的简写。
3 块级元素的水平垂直居中
常见块级元素有h1-h6、p、div、ul、ol、li等。
div classcontainerdiv classinnerText/div
/div前面介绍的内联元素的水平垂直居中方法也适用于块级元素。下面就不再重复介绍。
3.1 定位间距的多种组合
.container {height: 100px;width: 200px;background-color: cadetblue;position: relative;
}
.innerText {background-color: black;position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 50px;height: 50px;/* 水平垂直居中 */margin: auto;
}.container {height: 100px;width: 200px;background-color: cadetblue;position: relative;
}
.innerText {width: 50px;height: 50px;background-color: black;position: absolute;top: 50%;left: 50%;margin: -25px 0 0 -25px;
}.container {height: 100px;width: 200px;background-color: cadetblue;position: relative;
}
.innerText {width: 50px;height: 50px;background-color: black;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}
