垂直居中的几种方法

本文转载自查看原文 2020-02-27 14:20 1844

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;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 [转]移动端实现垂直居中的几种方法 CSS实现垂直居中的几种方法让DIV水平和垂直居中的几种方法实现水平垂直居中的几种方法将图片水平、垂直居中的几种方法 CSS垂直居中的8种方法 CSS子元素在父元素中水平垂直居中的几种方法让div盒子相对父盒子垂直居中的几种方法使元素相对于窗口或父元素水平垂直居中的几种方法前端：水平垂直居中的10种方法