搜尋

首頁  >  問答  >  主體

javascript - css 控制 div 始終水平垂直居中，這個div大小還不同

css 控制加了一個統一類別名稱的p，想讓他水平垂直居中顯示，但是這個p大小不一樣，css就不能寫固定，其他同學有什麼好的思路沒

欧阳克欧阳克2747 天前1180

全部回覆(10)我來回復

  • 迷茫

    迷茫2017-06-26 10:54:35

    flex佈局吧

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style> 
#main
{
    width:220px;
    height:300px;
    border:1px solid black;
    display:flex;
    justify-content:center;
    align-items:center;
}

#main p
{
    
}
</style>
</head>
<body>

<p id="main">
  <p style="background-color:coral;">红色</p>
</p>
</body>
</html>

    回覆
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-06-26 10:54:35

    一種是使用flex佈局，使子元素水平垂直居中；另一種是使用絕對定位加transform移動位置。
    .flex {
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .one {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    }

    傳送門

    回覆
    0
  • 扔个三星炸死你

    扔个三星炸死你2017-06-26 10:54:35

    垂直居中：
    表格佈置法 行內塊法
    絕對定位法
    視口居中
    基於flexbox 的方案

    回覆
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-06-26 10:54:35

    老生常談的問題，國外已經有人整理了各種狀況的垂直居中：https://css-tricks.com/center...

    甚至直接給你產生程式碼，也考慮是否相容IE：http://howtocenterincss.com/

    也可以看看翻譯過的版本：https://github.com/chenjsh36/...

    看完再也不怕各種垂直居中問題 23333

    回覆
    0
  • 黄舟

    黄舟2017-06-26 10:54:35

    父元素加display:flex,align-items:center

    回覆
    0
  • 巴扎黑

    巴扎黑2017-06-26 10:54:35

    上面使用彈性佈局可以,但是不支援低階瀏覽器，
    可以使用絕對定位來使p垂直水平居中

    p{
    position: absolute;  
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;  
    width: 620px;
    height: 618px;
    margin: auto;  
    padding: 30px 0;
    box-sizing: border-box;
}

    回覆
    0
  • 三叔

    三叔2017-06-26 10:54:35

    同樣建議 flex佈置

    回覆
    0
  • PHP中文网

    PHP中文网2017-06-26 10:54:35

    各種彈層？各種計算？左右居中很簡單，只需要

    margin:0 auto;
    即可，但是上下就稍微麻煩點了。雖然麻煩很多方式啊

    1，js判斷，這個比較笨重，就不說了，簡單會js的朋友都會

    2，disable:table. 這個需要兩個dom配合，不推薦，主要相容性也一般

    3，利用transfrom,這個如果不考慮相容，不知道高度，極力推薦。大概方式如下：

    .dom{
    寬自己定義
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    }
    知道這個寬度，不知道這個高度推薦

    4，如果知道寬高，那就不用上面了，因為上面不相容啊，這個狂兼容，代碼如下：

    .dom{
    寬高自己定義
    position: absolute;
    margin: auto;
    top:0;
    right: 0;
    bottom:0;
    left: 0;
    }
    bottom:0;

    left: 0;其他都沒問題。 

    <p class="mask-con">
    这是文字信息
</p>

    .mask{

    position: fixed;
top:0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,.5);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;

    }

    .mask-con{

    width: 200px;
/*height: 90px;*/
height: auto;
background: #fff;
font-size: 14px;
padding: 20px;
border-radius:10px;

    }
    6， 如果考慮相容====>請回看第一條。 【都什麼年代了 還考慮IE789 主要IE7 DOM1 支援都不大好，所以。 。 。 】

    7，其他沒啥了。以上幾種絕對夠用了。有好的，請給予補充🎜

    回覆
    0
  • 滿天的星座

    滿天的星座2017-06-26 10:54:35

    父元素

    {
 position: relative;
}

    子元素

    {
position:absolute;
top:50%;
left:50%;
transform:(-50%,-50%);
}

    回覆
    0
  • 習慣沉默

    習慣沉默2017-06-26 10:54:35

    再補充三種方法。

    • 採用絕對或固定定位居中一個已知寬度和高度的元素:

      .horizontal-and-vertical-center {
    width: 200px;
    height: 200px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

    • 採用 display: table 佈局居中元素，支援不確定的寬度和高度，並且相容於 IE8+ 和其他現代瀏覽器:

      .table {
    display: table;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
 
.cell {
    display: table-cell;
    vertical-align: center;
}
 
.horizontal-and-vertical-center {
    width: 800px;
    margin: 0 auto;
    /* 如果不定宽度的话用 inline-block 并且外层 text-align: center */
}

    • :before 偽元素撐開行高 (AmazeUI 在 modal 組件中使用的辦法，並且支援不確定的寬度和高度, IE8+):

      .am-modal {
    /* ... */
    text-align: center;
    /* ... */
}

.am-modal:before {
    content: "0B";
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.am-modal-dialog {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
    /* ... */
}

    回覆
    0
  • 取消回覆