垂直居中的幾種方法

本文轉載自查看原文 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種方法