前言
项目中往往需要使得元素上下左右都居中，即水平垂直居中，我想即使是菜鸟前端工程师也会略知一二种解决方法。需要居中的元素有的有固定高度，此类元素的居中容易解决，还有另外一种情况，就是需要居中的元素高度不固定（高度由元素中的文字或图片等元素决定），此文主要列举了几种使元素水平垂直居中的方法。
一、元素高度固定
方法1
定位 ，50%，margin负距
.box{
width: 400px;
height: 300px;
border: 2px solid black;
/* 把元素变成定位元素 */
position: absolute;
/* 元素距离上，左都为50% */
left: 50%;
top: 50%;
/* 让元素的左外边距，上外边距为元素宽高的1/2 注意margin是负距*/
margin-top: -150px;
margin-left: -200px;
}
图解：
方法一.png
方法2
定位，四个方向为都为0 ，margin：auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.container{
width: 100vw;
height: 100vh;
background: #eee;
overflow: hidden;
position: relative;
}
.container > div{
width: 30vw;
height: 30vw;
border: 1px solid black;
background: yellow;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div></div>
</div>
</body>
</html>
图解
方法二.png
方法三
使用伪元素 利用inline-block与vertical-align配合伪元素达到垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.dialog_container {
text-align: center;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.35);
}
/* 伪元素上下居中 */
.dialog_container:after {
display: inline-block;
width: 0;
height: 100%;
content: "";
vertical-align: middle;
background: red;
}
/* 真正居中的元素 */
.dialog_box {
display: inline-block;/*只有inline-block，inline和table可以使用vertical-align:middle*/
vertical-align: middle;
width: 50%;
height: 50%;
background: yellow;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container dialog_container">
<div class="dialog_box"></div><!--需要居中的元素-->
</div>
</body>
</html>
二、元素高度不固定
方法一
使用transform: translate（）使元素偏移到中间位置
.box2 {
position: absolute;
left: 50%;
top: 50%;
/* 设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)*/
transform: translate(-50%, -50%);
}
方法二
使用flex布局，此方法在本人简书关于flex布局的文章里面有所提及
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.container{
width: 100vw;
height: 100vh;
background: #eee;
overflow: hidden;
display: flex;
}
.container > div{
width: 30vw;
height: 30vw;
border: 1px solid black;
background: yellow;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div></div>
</div>
</body>
</html>
方法三
使用display:flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.div{
width: 580px;
height: 180px;
background: grey;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
</head>
<body>
<div class="div">
<div>dsafadsds</div>
<div>5655</div>
</div>
</body>
</html>
网友评论