1.水平居中
a.行内元素,如文本居中,div中的图片居中
text-align: center;
b.块级元素
//定宽:可以采取绝对定位的方式实现
.center {
width: 960px;
position: absolute;
left: 50%;
//左外边距的 负宽度一半的距离
margin-left: -480px;
}
//定宽,不定宽都可以:借助css3的变形属性Transform来完成
.content {
width:80%;
position: absolute;
left: 50%;
//向左移动自身宽度的一半
transform: translateX(-50%);
}
2.垂直居中
a.行文本的垂直居中
//元素的高度和行高相等时,文本呈现垂直居中
height== line-height
//高等于行高
b.多行文本的垂直居中
//不固定高度的垂直居中
//通过设置padding实现
//固定高度的垂直居中
//使用display设置为table-cell,配合样式vertical-align设置为middle来实现
table-cell://以表格单元格的形式来解析代码
c.多行文本固定高度的垂直居中
使用display设置为table-cell,配合样式vertical-align设置为middle来实现 table-cell:以表格单元格的形式来解析代码
<style>
div{
width: 400px;
height: 500px;
border: 2px solid #999;
padding:20px 0px;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div>
撑着油纸伞,独自彷徨在悠长,悠长又寂寥的雨巷,
我希望逢着一个丁香一样的结着愁怨的姑娘。
她是有丁香一样的颜色,丁香一样的芬芳,
</div>
</body>
3.块级元素垂直居中
a.固定宽高的垂直居中
.content {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
b.不固定宽高的垂直居中
.content {
width: 30%;
height: 30%;
position: absolute;
left: 50%;
top: 50%;
/* 左/上边缘向左/上移动自身宽/高度的一半 */
transform: translate(-50%, -50%);
}
c.基于Flex实现垂直居中
.content {
/*转为flex弹性盒布局*/
display: flex;
/*主轴上的对齐方式为居中*/
justify-content: center;
/*交叉轴上对齐方式为居中*/
align-items: center;
}