css實現一個垂直水平居中彈窗的三種方式

tianren124 發(fā)布于2019-08-02 16:12 / 1511人閱讀

方法一：

   //遮罩層
        
             //內容區(qū)

.bg{
  width:100%;
  height:100%;
  left:0;
  top:0;
  position:fixed;
  background:rgba(0,0,0,0.3);
}
.point{
  position:absolute;
  left:50%;
  top:50%;
}
.pop{
  width:500px; 
  height:500px; 
  position:absolute;
  left:-250px; 
  top:-250px; 
  border:2px solid red;
}

方法二：margin負邊距法

.bg{
  width:100%;
  height:100%;
  left:0;
  top:0;
  position:fixed;
  background:rgba(0,0,0,0.3);
}
.pop{
  width:500px; 
  height:500px; 
  position:absolute;
  left:50%;
  top:50%;
  left:-250px; 
  top:-250px; 
  border:2px solid red;
}

方法三：transform屬性

.bg{
  width:100%;
  height:100%;
  left:0;
  top:0;
  position:fixed;
  background:rgba(0,0,0,0.3);
}
.pop{
  width:500px; 
  height:500px; 
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  border:2px solid red;
}

GPU云服務器云服務器服務器的三種存儲方式阿里云發(fā)送郵件的三種方式云計算的三種服務模式 asp支持的三種控件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/54872.html

css實現一個垂直水平居中彈窗的三種方式

方法一： //遮罩層 //內容區(qū) .bg{ width:100%; height:100%; left:0; top:0; position:fixed; background:rgba(0,0,0,0.3); } .point{ position:absolute; left:50%; ...

Amio 2019-08-29 18:36 評論0 收藏0
[譯]148個資源讓你成為CSS專家

摘要：層疊樣式表二修訂版這是對作出的官方說明。速查表兩份表來自一份關于基礎特性，一份關于布局。核心第一篇一份來自的基礎參考指南簡寫速查表簡寫形式參考書使用層疊樣式表基礎指南，包含使用的好處介紹個方法快速寫成高質量的寫出高效的一些提示。迄今為止，我已經收集了100多個精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設計脫穎而出。 CSS3 資源 20個學習CSS3的有用資源 C...

impig33 2019-08-29 11:10 評論0 收藏0
初探flex布局

摘要：一布局概述布局是一種較新盒子模型，在布局模型中，彈性容器的子元素的排布可以比較靈活，可以根據容器的大小自動擴展或收縮其大小。下面我們來看用布局怎么解決這些問題。所以學會使用布局是非常有必要的。想詳細了解布局請點擊這里。一 flex布局 1.1 flex概述 flex布局是一種較新CSS盒子模型，在flex布局模型中，彈性容器的子元素的排布可以比較靈活，可以根據容器的大小自動擴展或收縮...

Jeffrrey 2019-08-29 12:48 評論0 收藏0
CSS之各種居中

摘要：前言在我看來，入門的路上最煩人的就是的各種居中了。在我初學過程中，居中這個問題經常困擾到我。使用偽元素垂直居中這種方法的前提是要是行內元素才能進行居中。結語以上的方法基本上可以用完成各種情況的居中。前言在我看來，入門CSS的路上最煩人的就是CSS的各種居中了。在我初學CSS過程中，居中這個問題經常困擾到我。那為什么CSS的居中這么煩人呢？我認為，這是因為CSS的居中方法以及它的適...

Labradors 2019-08-02 16:01 評論0 收藏0
CSS之各種居中

摘要：前言在我看來，入門的路上最煩人的就是的各種居中了。在我初學過程中，居中這個問題經常困擾到我。使用偽元素垂直居中這種方法的前提是要是行內元素才能進行居中。結語以上的方法基本上可以用完成各種情況的居中。前言在我看來，入門CSS的路上最煩人的就是CSS的各種居中了。在我初學CSS過程中，居中這個問題經常困擾到我。那為什么CSS的居中這么煩人呢？我認為，這是因為CSS的居中方法以及它的適...

Taste 2019-08-30 14:13 評論0 收藏0