1、css的居中方式-垂直对齐：
.verticalcenter{
position:relative;
top:50%;
transform:translateY(-50%);
}
ps:这种方式的垂直对齐重点应用在块状元素中，缺点是外边容器必须设置height，有兼容性的问题，但写了前缀绝大部分的浏览器都能够兼容，除了IE那几个。。。
那样针对垂直居中的办法最简单的则是设置高度：
.spancenter{
height:40px;
line-height:40px;
}
缺点:只能用在一行中并不可多行垂直对齐
2、水平对齐
div{
text-align:center;
}
ps:适用于文本的对齐方式
div{
margin: 0 auto;
}
ps:块元素最常用的居中方式
table-cell居中 ，表格布局中所有东西都是居中的
<div class="center-align">
<div class="center-core">
<img src=""/>
</div>
</div>
.center-align {
display: table;
bac公斤round: hsl(120, 100%, 97%);
width: 100%;
}
.center-core {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.center-core img {
width: 33%;
height: auto;
}
PS：这种方式虽然必须额外的包裹一个外边容器，外边容器必须设置高度，但兼容性极好。
运用absolute定位居中，这种方式兼容所有的浏览器。缺点便是必要显式的声明外边容器的高度：
.absolute-aligned {
position: relative;
min-height: 500px;
bac公斤round: hsl(200, 100%, 97%);}
.absolute-aligned img {
width: 50%;
min-width: 200px;
height: auto;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0;
bottom: 0; right: 0;}
| 
发表于 2024-6-30 09:52:50
