居中问题是CSS中经常遇到，但是居中方法之多。但哪种场景适用什么方法呢，一时叫人说起便让人毫无头绪，今天我就来总结一下所有类型的居中的问题。
一、水平居中
1、行内元素（文字、链接）
此类居中，只要在在文字等元素包裹的父元素加上
text-align: center;
2、块状元素居中
此类要在有宽度的前提下。设置左右margin为auto即可
div{
width:100px; //任意宽度
margin-left: auto;
margin-right: auto;
}
3、多个块状元素居中
此类大致有两种思路可以实现
- 使用flex弹性盒子布局
<style>
*{
margin:0;
padding:0;
}
body{
padding:20px;
}
div{
border:1px solid #ccc;
}
.wrapper{
display: flex;
justify-content: center;
padding:20px;
}
.item{
margin:10px;
width:80px;
height:80px;
background:#ccc;
}
<body>
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
<style>
多块状-Flex水平居中
- 使得多个块状元素变为行内元素，然后外层包裹父容器，使得转化为单个块状元素的居中
<style>
*{
margin:0;
padding:0;
}
div{
border:1px solid #ccc;
}
.wrapper{
text-align:center;
padding:20px;
}
.item{
display:inline-block;
width:80px;
height:80px;
background:#ccc;
}
</style>
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
二 、垂直居中问题
1、行内元素（文字、链接）
①、单行内容
有的时候文字本身就是垂直居中的，因为文字上下方的padding设置的是相等的，若是没有设置padding则可以使得line-height等于父容器的高度即可。
<style>
</style>
div{
height:100px;
padding:20px;
border:1px solid;
line-height:100px;
}
<div>
XXXXX
</div>
单行垂直居中
②、多行居中
多行文字在表格中默认就是垂直居中的。利用这一特点可以设置父容器为display：table ，然后设置内部元素为display: table-cell;
<style>
div{
border:1px solid #ccc;
width:250px;
height:300px;
display: table;
}
div p{
display: table-cell;
vertical-align: middle;
}
</style>
<div>
<p>sssss s ssssss s ss sssss sss ssssss sssssss ssssssssssssss</p>
</div>
表格垂直居中
由于table过于难于布局，因此我们可以使用flex布局，不过父容器的高度不能设置，有内部元素的height决定整个容器的高度
<style>
div{
border:1px solid #ccc;
width:250px;
display: table;
}
div p{
display: flex;
justify-content: center;
flex-direction: column;
height: 250px;
}
</style>
flex垂直居中
如果上述两种方法都不能实现，垂直居中还有一个奇淫巧计，使用伪类的方法达到垂直居中,可以使用伪类来创造一个空的元素，两个vertical-align:middle的inline-block并排的话，高度小的那个会相对高的那个垂直居中排放
<style>
*{
margin:0;
padding:0;
}
div{
width:300px;
height:300px;
text-align:center;
border:1px solid;
}
div p
{
width: 292px;
vertical-align:middle;
display: inline-block;
}
div:before{
content: " ";
display: inline-block;
height: 100%;
width:0;
vertical-align: middle;
}
</style>
<div >
<p>ssss ssss sss sss ssss sss ssssssssssss ssssss sss sss sss ss ss ss ss ss ss ss ss ss ss </p>
</div>
奇淫巧计
2、块状元素
①、知道元素高度
.parent { position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* 根据元素高度 */}
②、不知道元素高度
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
③、flex布局
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
三、垂直&水平 一同居中
1、固定宽高的元素
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
2、宽高未知元素
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3、flex布局
.parent {
display: flex;
justify-content: center;
align-items: center;
}
网友评论