这个问题，经久不衰。。。
一、一个宽高固定的元素在页面上实现水平垂直居中有哪些方法？
方法1. 父元素相对定位，目标元素绝对定位，设置margin为auto auto，left、right、top、bottom都设为0。
代码：
<style type="text/css">
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
.content {
width: 300px;
height: 300px;
background: orange;
position:absolute;
margin:auto;
left:0;
top:0;
bottom:0;
right:0;
}
</style>
<body>
<div class="content"></div>
</body>
效果：
image.png
方法2. 父元素相对定位，目标元素绝对定位，left和top分别设为50%，设置目标元素一半宽高的margin负间距。
代码：
<style type="text/css">
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
.content {
width: 300px;
height: 300px;
background: orange;
position:absolute;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-150px;
}
</style>
<body>
<div class="content"></div>
</body>
效果：
image.png
方法3. Flex弹性布局法。
代码：
<style type="text/css">
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center; /*显示在主轴的中间*/
align-items: center; /*子项在侧轴中间位置*/
}
.content {
width: 300px;
height: 300px;
background: red;
}
</style>
<body>
<div class="content"></div>
</body>
效果：
image.png
方法4. 父元素使用flex布局（display：flex）,子元素使用margin：auto。
代码：
<style type="text/css">
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
}
.content {
width: 300px;
height: 300px;
background: red;
margin: auto auto;
}
</style>
<body>
<div class="content"></div>
</body>
效果：
image.png
二、多行文字实现水平垂直居中有哪些方法？
场景：父元素宽度固定，要求实现文字内容水平垂直居中。
方法1. 用display:table和display:table-cell模拟盒子。
代码：
<style type="text/css">
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
}
.table {
display: table;
width: 500px;
height: 100px;
margin:auto auto;
}
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
<body>
<div class="table">
<div class="table-cell">
多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中
</div>
</div>
</body>
效果：
image.png
缺点：ie7以下不兼容。
方法2. 用display:flex实现。
<style type="text/css">
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
}
.middle-content{
margin: auto auto;
width: 500px;
height: 500px;
display: flex;
align-items: center;
}
</style>
<body>
<div class="middle-content">
多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中
</div>
</body>
效果：
image.png
网友评论