CSS垂直居中
2024-10-15 21:30:55
一、单行文本垂直居中：
设置其文本的行高line-height与其父容器高度相等即可。如
<style>
.test{
background-color: grey;
line-height:90px;
}
</style>
<body>
<div class="test">文本垂直居中</div>
</body>
效果图如下
二、已定位的盒子实现垂直居中
法一：子盒子绝对定位后设置其高度，margin:auto,且top、right、left、bottom均为0.
<style>
.container{
width: 500px;
height: 500px;
position: relative;
background-color: red;
}
.absolute-center{
width: 50%;
height: 50%;
overflow: auto;
margin:auto;
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
background-color: green;
}
</style> <body>
<div class="container">
<div class="absolute-center">垂直居中</div>
</div>
</body>
效果图如下：
法二：让其子盒子绝对定位后的top:50%,margin-top:-自身高度的一半px;水平居然则设其left与margin-left
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
width: 500px;
height: 500px;
position: relative;
background-color: red;
}
.absolute-center{
width:100px;
height: 100px;
position: absolute;
top:50%;
margin-top:-50px;
left:50%;
margin-left:-50px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="absolute-center">垂直居中</div>
</div>
</body>
</html>
效果图如下：
如果想让其在可视区内永远居中，则需要设置其定位为position:fixed;z-index:999;
法三：当元素的高度不确定时，可配合translate来实现，不过IE9不支持，代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.parent{
position: relative;
height: 300px;
background-color: grey;
}
.child{
position: absolute;
top:50%;
transform:translateY(-50%);
background-color: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">adfadf</div>
</div>
</body>
</html>
三、未定位、未浮动的盒子实现垂直居中
法一：设置其父元素为table-cell布局，配合vertical-align: middle;来实现，如下代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.parent{
display: table-cell;
vertical-align: middle;
background-color: grey;
height: 100px; }
.child{
background-color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">table-cell实现的居中</div>
</div>
</body>
</html>
如果已经定位或浮动的元素仍然想用此方法来实现垂直居中，需要在其外面再加一个父盒子包起来便可实现。若要IE7支持，则需要改为<table>表格布局。
法二：若子元素是图片，通过设置父元素的行高来代替高度，且设置父元素的font-size为0
vertical-align:middle的解释是元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐。由于字符X在em框中并不是垂直居中的，且各个字体的字符X的高低位置不一致。所以，当字体大小较大时，这种差异就更明显。当font-size为0时，相当于把字符X的字体大小设置为0，于是可以实现完全的垂直居中。如下代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.parent{
line-height: 500px;
fon-size:0;
background-color: grey;
width: 500px; }
.child{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="parent">
<img src="img/shop.png" alt="" class="child"/>
</div>
</body>
</html>
效果图如下：
法三：通过新增元素来实现垂直居中的效果
新增元素设置高度为父级高度，宽度为0，且同样设置垂直居中vertical-align:middle的inline-block元素。由于两个元素之间空白被解析，所以需要在父级设置font-size:0，在子级再将font-size设置为所需值；若结构要求不严格，则可以将两个元素一行显示，则不需要设置font-size:0。代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.parent{
height: 100px;
font-size:0;
background-color: grey;
width: 200px;
}
.child{
display: inline-block;
font-size:20px;
vertical-align: middle;
background-color: blue;
}
.childSbling{
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">adfadf</div>
<i class="childSbling"></i>
</div>
</body>
</html>
效果图如下：
法四：利用VW单位。VW是与视口宽度相关的，1VW表示视口宽度的1%
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
box-sizing: border-box;
background: #655;
color: white;
text-align: center;
}
h1 {
margin: 0 0 .2em;
font-size: 150%;
}
p {
margin: 0;
}
body {
background: #fb3;
font: 100%/1.5 sans-serif;
}
</style>
</head> <body>
<div class="main">
<h1>I am a title</h1>
<p>asdfasdfasdf</p>
</div>
</body> </html>
效果如下：
四、使用弹性盒子来实现垂直居中，不过IE9以下不支持。
法一：在父盒子上加display:flex;align-items: center;如下代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.parent{
display: flex;
align-items: center;
background-color: grey;
height: 200px;
} </style>
</head>
<body>
<div class="parent">
<div class="child">adfadf</div>
</div>
</body>
</html>
效果如下：
法二：在子盒子上加margin:auto 0;代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.parent{
display: flex;
background-color: grey;
height: 200px;
}
.child{
margin:auto 0;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">子</div>
</div>
</body>
</html>
效果如下：
最新文章
- eclipse启动不了，出现“Java was started but returned exit code=13......”对话框
- SQL Server常用命令
- 如何给Sublime安装插件
- Workspace defines a VM that does not contain a valid jre/lib/rt.jar: C:\Program Files\Java\jre7
- 15第十五章UDF用户自定义函数(转载)
- iOS8中添加的extensions总结（四）——Action扩展
- C#：判断一个String是否为数字
- codevs1993草地排水（最大流）
- 老李分享：QTP的录制原理以及实现
- Druid 详细介绍
- luogu P1762 偶数
- classfication中使用图像金字塔和sliding windows提高准确率
- linux下开启某个端口的方法：可用于SQL
- MapReduce高级编程
- Response.Redirect与Server.Transfer区别-转
- 解决：SqlDateTime 溢出。必须介于 1/1/1753 12:00:00 AM 和 12/31/9999 11:59:59 PM 之间提示问题
- [心平气和读经典]The TCP/IP Guide(002)
- Android如何自学----转自lavor从segmentfault
- rocketmq双主发送消息 SLAVE_NOT_AVAILABLE 状态
- jsp:include 动作指令 与 include 指令