1、垂直居中一个不定宽高的浮动元素
html
<div class="div1">
<div class="div2">我是一个浮动元素</div>
</div>
css
.div1{
width:300px;
height:200px;
background: #f5f5f5;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
.div2{
float:right;
}
效果
2、水平居中未知宽的浮动元素
方法一:
html
<div class="div1">
<div class="warp">
<div class="div2">我是一个浮动元素</div>
</div>
</div>
css
.div1{
width: 300px;
height: 200px;
background: #f5f5f5;
border: 1px solid red;
}
.warp{
position: relative;
float: right;
right: 50%;
}
.div2{
height: 100px;
border: 1px solid green;
float: right;
position: relative;
left: 50%;
}
效果
方法二:
html
<div class="div1">
<div class="div2">我是元素,浮不浮动没关系</div>
</div>
css
.div1{
width: 300px;
height: 200px;
background: #f5f5f5;
margin: auto;
border: 1px solid red;
display: flex;
justify-content: center;
}
.div2{
height: 100px;
border: 1px solid green;
float: left; // 浮不浮动都一样
}
效果
3、垂直居中一个一个未知宽高的元素
html
<div class="div-1">
<div class="div-2">我是元素居中我</div>
</div>
css
.div-1{
width: 300px;
height: 200px;
background: #f5f5f5;
border: 1px solid red;
display: flex;
align-items: center;
}
.div-2{
border: 1px solid green;
/*height: 100px;*/ //高度已知和未知无所谓
}
效果
4、水平垂直居中一个未知宽高的元素
方法一:
html
<div class="div-1">
<div class="div-2">我是元素居中我</div>
</div>
css
.div-1{
width: 300px;
height: 200px;
background: #f5f5f5;
border: 1px solid red;
position: relative; //主要代码
}
.div-2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);//以上主要代码
border: 1px solid green;
}
效果
方法二:
html
<div class="div-1">
<div class="div-2">我是元素居中我</div>
</div>
css
.div-1{
width: 300px;
height: 200px;
background: #f5f5f5;
border: 1px solid red;
display: flex; // 主要代码
justify-content: center;
align-items: center;
}
.div-2{
border: 1px solid green;
}
效果
方法三:
html
<div class="div-1">
<div class="div-2">我是元素居中我</div>
</div>
css
.div-1{
width: 300px;
height: 200px;
background: #f5f5f5;
border: 1px solid red;
display: table; //主要代码
}
.div-2{
border: 1px solid green;
display: table-cell; // 主要代码
text-align: center;
vertical-align: middle;
}
效果(边框线相贴在一起了)
居中还有很多其他方法,没有一一列举出来,只是最近遇到了这个问题,总结了几种方法