html中的垂直居中和水平居中
方法一：运用flex布局
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.app{width: 500px;height: 500px;background: green;}
.app{display: flex;align-items: center;justify-content: center}
/*这样用text-align无用，布局以后，子元素的float、clear和vertical-align属性将失效。*/
.app img{width: 200px;height: 200px}
style>
head>
<body>
<div class='app'>
<img src="img/bg.jpg" alt="img" title="img"/>
div>
body>
html>方法二：也是运用flex布局，不过这次是在子元素用align-self：center
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.app{width: 500px;height: 500px;background: green;}
.app{display: flex;justify-content: center}
.app img{align-self: center}
.app img{width: 200px;height: 200px}
style>
head>
<body>
<div class='app'>
<img src="img/bg.jpg" alt="img" title="img"/>
div>
body>
html>方法一和方法二的效果如图：
方法三：
如果在一段块元素包裹的行内元素中有某个元素比较特殊, 比如: 大写加粗的文字 、 乱入的图片图标, 垂直居中:
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.text{width: 500px;height: 500px;background: red;}
.text img{ width: 200px;height: 200px;vertical-align: middle;}
style>
head>
<body>
<div class="text">
<img src="img/bg.jpg" alt="img" title="img"/>可以的
div>
body>
html>效果：
方法四：
父元素相对定位(或其他定位){ position: relative; }
子元素绝对定位{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto }
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.outer{width: 400px;height: 400px;background: pink;position: relative;}
.inner{width: 200px;height: 200px;background: black;position: absolute;left: 0;bottom: 0;top: 0;right: 0;margin: auto}
style>
head>
<body>
<div class="outer">
<div class="inner">div>
div>
body>
html>效果：
方法五：
用padding
方法六：
height/line-height设为相同值
方法七：
父元素设置{ display: table-cell; vertical-align: middle; }
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.app{width: 500px;height: 500px;background: green;}
.app{display: table-cell;vertical-align: middle;text-align: center}
.app img{width: 200px;height: 200px}
style>
head>
<body>
<div class='app'>
<img src="img/bg.jpg" alt="img" title="img"/>
div>
body>
html>效果：
方法八：
父元素：position：relative
中间元素：position：absolute；left：50%；top：50%
子元素：position：absolute；left：-50%；top：-50%
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.container{width: 400px;height: 400px;position: relative;background: pink}
.box{position: absolute;left:50%;top:50%;width: 200px;height: 200px}
.boxinner{width: 200px;height: 200px;position: relative;left: -50%;top:-50%;background: black}
style>
head>
<body>
<div class="container">
<div class="box">
<div class="boxinner">div>
div>
div>
body>
html>效果：
方法九：
父元素：position：relative
子元素：position：absolute；（transform: translate: (-50%, 50%) ）或者（margin-left：-xxpx；margin-top：-xxpx）top：50%；left：50%
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.outer{width: 400px;height: 400px;background: pink;position: relative;}
.inner{width: 200px;height: 200px;position: absolute;margin-left: -100px;margin-top: -100px;left: 50%;top: 50%;background: black}
style>
head>
<body>
<div class="outer">
<div class="inner">div>
div>
body>
html>效果：
方法十
利用伪元素
.main{width: 400px;height: 400px;background: green;text-align: center}
.main:after{content: '';display: inline-block;width: 0;height: 100%;vertical-align: middle;overflow: hidden;}
.inner{width: 100px;height: 100px;background: pink;vertical-align: middle;display: inline-block;}
<div class="main">
<div class="inner">div>
div>方案十一：
多行文本居中
<div style="width:150px;height:100px;line-height:100px;background-color:#ccc;">
<span style="display:inline-block;line-height:1.4em;vertical-align:middle;">This is a test.<br/>
This is a test.
span>
div>