一：通过弹性布局
<style>
#container .box{
width: 80px;
height: 80px;
position: absolute;
background:red;
}
#container{
background:green;width: 250px;height: 250px;border: 1px solid khaki; //下面三行是核心代码
display: flex;
justify-content: center;
align-items: center; }
</style>
</head>
<body>
<div id="container"> <div class="box">
</div></div>
效果如下：
二、通过绝对定位来水平居中一个块级元素，（知道元素宽度，高度）。 <style>
#container .box{
width: 80px;
height: 120px;
background:red;
position: absolute;
top: 50%;
left: 50%;
background:red;
margin-top: -60px; // 这二行可以用 transform: translate(-50%,-50%);代替分别对应x,y即宽高的一半
margin-left: -40px;
}
#container{
position:relative;background:green;width: 250px;height: 250px;border: 1px solid khaki; </style>
</head>
<body>
<div id="container"> <div class="box"> </div></div>
效果图如下：
垂直居中单行文字
<div>
<span>这是居中的单行文字<span>
</div> <style>
div{width:300px;height:200px;background:#66f;color:white;}
span {line-height:200px}
</style>
//这里通过父元素高度(height)与文字行高（line-height）相等做到的
效果图：
多行文字的居中
<div>
<p>这是居中的多行文字
这是居中的多行文字
这是居中的多行文字
这是居中的多行文字<p> </div>
<style>
div{width:300px;height:200px;background:#66f;color:white;
display:table
}
p{vertical-align:middle;display:table-cell}
</style>
//这里通过为父元素设置display:table，把多行文字用p元素包裹然后运用只对表格单元格有效的vertical-align:middle的css规则，就能完美居中
//此效果还可以用它来居中图片。
效果图：