垂直居中的几种方法

1.文字居中

<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
   <div id="father">
       <span id="child">
           子元素
       </span>
   </div>
</body>
 <style type="text/css">
    #father{
       width:200px;
       height:100px;
       border:1px solid red;
       text-align:center;
    }
    #child{
       line-height:100px;
    }
 </style>

2. div居中

<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
   <div id="father">
       <div id="child">
           
       </div>
   </div>
</body>
 <style type="text/css">
    #father{
       width:200px;
       height:100px;
       border:1px solid red;
       display: flex;
       justify-content:center;
       align-items: center;
    }
    #child{
       width:50%;
       height:50%;
       border:1px solid blue;
    }
 </style>
</html>

3. div居中

<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
   <div id="father">
       <div id="child">
           
       </div>
   </div>
</body>
 <style type="text/css">
    #father{
       width:200px;
       height:100px;
       border:1px solid red;
       position:relative;
    }
    #child{
       width:50px;
       height:50px;
       border:1px solid blue;
       top:50%;
       left:50%;
       transform:translate(-50%,-50%);
       position:absolute;
    }
 </style>
</html>

4.div

使用弹性盒子，居中变的很简单，只想要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
     400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
     75px;
    height: 75px;
    margin: auto;
}
</style>
</head>
<body>