关于文字图片水平垂直居中
2018-08-29 本文已影响0人
JackLee_
前端在项目开发过程会遇到很多的水平和垂直居中，没办法，美观。以前我的做法基本都是按套路来，文字水平居中用text-align：center 垂直居中就用line-height: 【容器高度】,如果多行文字的话就用内联元素包起来，然后再用line-height, 图片的话一般会搭配display： table；verticle-align:middle来使用。最近遇到一个强大的属性来应对一切垂直水平居中来分大家分享一下，下面直接上：
1 文字
1，设置父元素： display: flex
2，垂直居中： align-items: center
<style>
.container{
width: 200px;
height: 200px;
display: flex;
background: #f5f5f5;
align-items: center;
}
</style>
<body>
<div class="container">
今天天气很好，心情也很好！
</div>
</body>
image.png
3，水平居中： justify-content: center,为方便看效果我把宽度加到400px, 下面看下代码及效果
<style>
.container{
width: 400px;
height: 200px;
display: flex;
background: #f5f5f5;
justify-content: center;
}
</style>
<body>
<div class="container">
今天天气很好，心情也很好！
</div>
</body>
image.png
2 下面试试图片
为了快速看效果，这次直接加上两个属性
<style>
.container{
width: 400px;
height: 400px;
display: flex;
background: #f5f5f5;
justify-content: center;
align-items: center;
}
img{
width: 200px;
height: 200px;
}
</style>
<body>
<div class="container">
<img src="./test.jpg" />
</div>
</body>
image.png
3 试试其他块级元素呢？
<style>
.container{
width: 400px;
height: 400px;
display: flex;
background: #f5f5f5;
justify-content: center;
align-items: center;
}
.content{
width: 100px;
height: 100px;
}
.content1{
background: red;
}
.content2{
background: green;
}
</style>
<body>
<div class="container">
<div class='content1'>今天天气好</div>
<div class='content2'>心情也好</div>
</div>
</body>
image.png
可以看到，块级元素被居中之后变成了内联元素，没办法设置宽高
3 有没有办法让多元素垂直排列居中呢？
答案当然是有的，用到了flex-direction: column
<style>
.container{
width: 400px;
height: 400px;
display: flex;
background: #f5f5f5;
justify-content: center;
align-items: center;
flex-direction: column;
}
.content{
width: 100px;
height: 100px;
}
.content1{
background: red;
}
.content2{
background: green;
}
</style>
<body>
<div class="container">
<div class='content1'>今天天气好</div>
<div class='content2'>心情也好</div>
</div>
</body>
image.png
通过上面的例子相信大家已经非常清楚了，文字，图片或者多块级元素居中现在非常简单， 只需要display: flex;align-items: center; justify-content: center；三个属性就可以了。如果还想让多元素垂直排列的话，还可以加flex-direction: column属性就OK了。
最后，今天就到这里了， 如果还有特别的兴趣 可以去看看这几个属性的其他值，能让你在布局的时候有更多的思路。
需要注意的是： 如果使用了flex-direction： column，那么align-items和justify-content的效果就相反！
