在Css中对元素进行水平居中是很简单的,如果他是一个行内元素,对它的父元素应用text-align:center;如果是一个块级元素,就对自身应用margin:auto。然而如果要对一个元素进行垂直居中,想想就头皮发麻。本文主要探索以Css3为基础进行元素的垂直居中,对当下流行的几种技巧不做讨论,原因如下:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
position: relative;
width: 400px;
height: 150px;
border: 1px solid red;
}
.wrap .cont{
position: absolute;
top: calc(50% - 30px);
left: calc(50% - 50px);
width: 100px;
height: 60px;
background: gray;
}
.wrap02{
position: relative;
width: 400px;
height: 150px;
border: 1px solid red;
}
.wrap02 .cont{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: gray;
}
</style>
</head>
<body>
<div class="wrap">
<div class="cont">这个内容部分需要定宽和定高</div>
</div>
<div class="wrap02">
<div class="cont">这个内容部分可以实现自适应</div>
</div>
</body>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
width: 18em;
background: lightgreen;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="wrap">
这个只能做到视口居中
</div>
</body>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap01{
display: flex;
min-height: 10vh;
border: 1px solid gray;
width: 30vw;
}
.wrap01 .main{
margin: auto;
padding: 5px;
background: lightblue;
}
.wrap02{
margin-top: 10px;
width: 28em;
height: 10em;
display: flex;
align-items: center;
justify-content: center;
background: lightblue;
}
</style>
</head>
<body>
<div class="wrap01">
<div class="main">
flex + margin:auto实现垂直居中
</div>
</div>
<div class="wrap02">
flex的align-items(垂直对齐)和justify-content(水平对齐)<br/>实现垂直水平居中
</div>
</body>
经过上述介绍,我们发现各垂直居中的方式应用场景是有所不同的。