【css基础修炼之路】— 谈谈元素的垂直水平居中
2024-09-03 17:03:18
作为一个初级的前端工程师,在开发的过程中遇到了许多问题,其中使元素垂直居中这个问题难住了我,可能在大家看来这是一个非常小的问题,但是却困扰了我很长时间,于是决定做一个总结!!!
废话不多说,直接上代码,里面有我的思考过程
案例一
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>div实现垂直居中</title>
</head>
<style>
.abc {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: ;
top: ;
bottom: ;
right: ;
margin: auto;
} .box {
position: relative;
width: 500px;
height: 500px;
background: red;
display: inline-block;
}
</style>
<div class="box">
<div class="abc"> </div>
</div> <body>
</body> </html>
案例二(文字的水平垂直居中)
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<style>
div {
height: 300px;
width: 200px;
display: table;
background: #;
} span {
display: table-cell;
vertical-align: middle;
}
</style>
<div>
<span>我是span</span>
</div>
</body> </html>
案例三
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>div实现垂直居中</title>
</head>
<style>
.abc {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: %;
top: %;
margin-left: -100px;
margin-top: -100px;
} .box {
position: relative;
width: 500px;
height: 500px;
background: red;
display: inline-block;
}
</style>
<div class="box">
<div class="abc"> </div>
</div> <body>
</body> </html>
案例四
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>div实现垂直居中</title>
</head>
<style>
/*
table-cell实现居中
将父盒子设置为table-cell元素,设置
text-align:center,vertical-align: middle;
子盒子设置为inline-block元素
*/ .ok {
width: 200px;
height: 200px;
background: red;
display: table-cell;
/*这个必须是table-cell*/
/*父级是一个小表格,表格默认是放文字的,子集是一个小果冻元素,给父级设置vertical-align:middle使元素垂直居中*/
text-align: center;
vertical-align: middle;
} .innerBox {
width: 100px;
height: 100px;
background: green;
display: inline-block;
/*注意:里面的元素必须是inline-block*/
}
</style> <body>
<div class="ok">
<div class="innerBox">
</div>
</div>
</body> </html>
案例五
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<style>
/* 注意:该方法值适合文字的水平垂直居中;
* 父级高度固定,嵌套行内元素
*关键属性:父级:diaplay:tabel; 子集:display:tabel-cell; vertical-align:middle;
*/ .div {
height: 300px;
width: 200px;
display: table;
/*这么理解:父级是一个固定宽度高度的大表格*/
background: #;
} .span {
display: table-cell;
/* 子集是父级表格里面的一个小格,设置display:table-cell,给父级设置垂直居中*/
vertical-align: middle;
}
</style>
<div class="div">
<div class="span">sddddd</div>
</div>
</body> </html>
最新文章
- iOS开发网络篇—大文件的多线程断点下载
- 解析php时间戳与日期的转换
- 18. 4Sum
- 我的博客css得到别人的认可
- jTemplates——学习(1)
- iOS修改截取图片不规范问题
- Eclipse无提示的解决办法 和 内容辅助技巧
- Exams
- Chrome浏览器扩展开发系列之七:override页面
- 在Eclipse里面使用git上传项目到码云
- javaweb-3-在Eclipse中引入Tomcat
- SAC E#1 - 一道中档题 Factorial
- 【转】MySQL-Select语句高级应用
- 初识hibernate——环境搭建
- JS(JavaScript)的初了解2(更新中&#183;&#183;&#183;)
- Redis对象占用内存分析
- STM32 Seminar 2007 -- Timer
- storm学习之六-使用Maven 生成jar包多种方式
- Maven项目标准目录结构
- Debian9安装桌面环境