淺談css中一個元素如何在其父元素居中顯示

時間  2020-06-09
標籤 淺談 css 一個 元素 如何 其父 居中 顯示 欄目 CSS 简体版
原文   原文鏈接

css如何垂直居中一個元素的問題已是一個老生常談的問題了。無論對於一個新手或者老手，在面試過程當中是常常被問到的。前兩天在看一個flex的視頻教程，當中提到了有關元素的居中問題，因此今天小編就來扒一扒幾種常見的方式。不足之處請你們批評指正（全部的代碼都是本身親手敲過可用的）css

一、水平居中（margin:0 auto;）　　html

　　關於這個，你們應該是最不陌生的,無論是在培訓班仍是本身自學的話 。這個應該是老師講的第一個方法了（水平方向上），可是其有一個前提，就是被包裹的元素不能有浮動的屬性。不然的話這個屬性就會失效。具體以下圖代碼：css3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
         body{margin: 0;}
         .box{
             width: 400px;
             height: 400px;
             border:1px solid red;
         }
         item{
             margin:0 auto;
             width: 100px;
             height: 100x;
             background: green;
         }
</style>
<body>
     <div  class = "box" >
         <div  class = "item" ></div>
      </div>
</body>
1
 

　　

二、水平居中（text-align：center;）面試

　　這個屬性在沒有浮動的狀況下，咱們能夠將其轉換爲inline/inline-block，而後其父元素加上text-align:center;屬性就能夠將其居中flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
< style >
         body{margin: 0;}
         .box{
             width: 400px;
             height: 400px;
             border:1px solid red;
             text-align:center;
         }
         item{
             display:inline/inline-block;
             width: 100px;
             height: 100x;
             background: green;
         }
</ style >
< body >
     < div  class="box">
         < div  class="item"></ div >
      </ div >
</ body >

　　

三、水平垂直居中（一）  子元素相對於父元素絕對定位，而且margin值減去本身寬高的一半spa

該方法具備必定的侷限性，由於其必需要知道子元素自己的寬高3d

複製代碼 
<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;
           position: relative;
        }
        item{
            position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px;
            width: 100px;
            height: 100x;
            background: green;
        }
</style>
<body>
    <div class="box">
        <div class="item"></div>
     </div>
</body>
複製代碼

四、水平垂直居中（二）  子元素相對於父元素絕對定位，而且margin值位autocode

該方式不受元素寬高所限制，比較好用（推薦使用）orm

複製代碼 
<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;
           position: relative;
        }
        item{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top:0; margin: auto;
            width: 100px;
            height: 100x;
            background: green;
        }
</style>
<body>
    <div class="box">
        <div class="item"></div>
     </div>
</body>
複製代碼

五、水平垂直居中（三）  diplay：table-cell視頻

該方式是將元素轉換成表格樣式，再利用表格的樣式來進行居中（推薦）

複製代碼 
<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red; display: table-cell; vertical-align: middle;
        }
        item{ margin:0 auto;
            width: 100px;
            height: 100x;
            background: green;
        }
</style>
<body>
    <div class="box">
        <div class="item"></div>
     </div>
</body>
複製代碼

六、水平垂直居中（四） 絕對定位和transfrom

該方法用最能裝逼，用到了css3變形，面試者看到你代碼裏面有這樣的 ，你的逼格瞬間就上去了，固然了  你知道的，逼格的東西是有兼容性問題的

複製代碼 
<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;
            position:relative;
        }
        item{
            width: 100px;
            height: 100x;
            background: green;
            position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
        }
</style>
<body>
    <div class="box">
        <div class="item"></div>
     </div>
</body>
複製代碼

七、水平垂直居中（五）css3中的flex屬性

這個屬性很好用，可是絕逼有兼容性問題的，用者要注意

複製代碼 
<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red; display: flex; justify-content: center; align-items: center;
        }
        item{
            width: 100px;
            height: 100x;
            background: green;
            
        }
</style>
<body>
    <div class="box">
        <div class="item"></div>
     </div>
</body>
複製代碼

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程