未知寬高div水平垂直居中3種方法

阿新 • • 發佈：2019-01-17

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<!--方法1：一個未知寬高的彈出框，水平垂直居中-->
<div style="position:relative;width:100%;height:600px;border:1px solid #888">方法1
	<div class="modal">
	    <div class="modal-header">彈出窗標題</div>
	    <div class="modal-body">
	    	微信開發者大會（北京）的成功舉辦，引起業界的極大關注。
	    	應廣大微信開發者的強列要求，深圳微信開發者大會也在如火如荼的籌備中。
	    	本文總結了技術團隊不應錯過2014年深圳微信開發者大會的十個理由	
	    </div>
	</div>
</div>

<style type="text/css">
.modal-header {
  padding: 10px 20px;
  background: rgba(0,0,0,.25);
  color:#fff;
}
.modal-body{
  padding: 20px;
  background: #fff;
}
.modal {
  border: 1px solid #888;
  border-radius: 5px;
  box-shadow: 0 0 3px rgba(0,0,0,.5);
  /**主要程式碼*/
  position:absolute;
  top:50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
<!--方法1 end-->

<!--方法2 parent-panel內的元素水平垂直居中-->
<div class="parent-panel">方法2
	<div class="middle-panel">
		<p>深圳站依舊秉承“演講從實踐出發、聽眾從中受益”的原則，
		在保持北京站特色之餘，針對微信開發的新情況重新設定了議程，內容源於實踐又富於啟發性。
		</p>
		<p>正進行微信開發的開發團隊（開發者）、有興趣或即將投身於微信開發的開發者、
		想開發相關微信應用正努力尋找微信開發團隊的傳統IT企業，該會將是你不容錯過的學習借鑑成功研發經驗、尋找合作的大好機會。
		</p>
		<p>如果你還在猶豫，可以仔細閱讀一下主辦方總結的技術團隊不應錯過2014年微信開發者大會深圳站的十個理由。
		</p>
	</div>
</div>

<style type="text/css">
.middle-panel{
	width:500px;
	border:1px solid #888;
}
.parent-panel{
	width:100%;
	height:400px;
	border:1px solid #888;
	
	/**主要程式碼*/
	display: flex;
    align-items: center;
    justify-content: center;
}
</style>
<!--方法2 end-->

<!--方法3 parent-panel2內的元素垂直居中-->
<div class="parent-panel2">方法3
	<div class="middle-panel2">
		<p>深圳站依舊秉承“演講從實踐出發、聽眾從中受益”的原則，
		在保持北京站特色之餘，針對微信開發的新情況重新設定了議程，內容源於實踐又富於啟發性。
		</p>
		<p>如果你還在猶豫，可以仔細閱讀一下主辦方總結的技術團隊不應錯過2014年微信開發者大會深圳站的十個理由。
		</p>
	</div>
</div>

<style type="text/css">
.middle-panel2{
	width:500px;
	border:1px solid #888;
	display:inline-block;
    vertical-align: middle;
}
.parent-panel2{
	width:100%;
	height:400px;
	border:1px solid #888;
}
.parent-panel2:after{
		/**主要程式碼*/
	content:"";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
	}
</style>
<!--方法3 end-->


</body>
</html>

未知寬高div水平垂直居中3種方法

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <!--方法1：一個未知寬高的彈出框，水平垂直居中--&

CSS未知寬高元素水平垂直居中

use ali lan 並且 css3 優點 left 顯示設置 spl 思路：顯示設置父元素為：table，子元素為：cell-table，這樣就可以使用vertical-align: center，實現水平居中優點：父元素（parent）可以動態的改變高度（table元

未知寬高元素水平垂直居中方法

CSS未知寬高元素水平垂直居中方法一思路：顯示設定父元素為：table，子元素為：cell-table，這樣就可以使用vertical-align: center，實現水平居中優點：父元素（parent）可以動態的改變高度（table元素的特性）缺點：IE8以下不支援 <style typ

不固定寬高元素水平垂直居中

背景：本文主要講述不用flex佈局和grid佈局時如何設定不定高寬元素的水平垂直居中，這是很多時候經常遇到的問題。頁面結構 <div class="box"> <div class="content"><span>

不知道寬高，水平-垂直居中顯示

1、Css3使用translate屬性，使不知道寬度、高度的元素實現水平、垂直居中 Css3程式碼： .wrapper{ padding:20px; background: orange; color: #fff; position: ab

div 水平垂直居中

nta isp right posit true ems container sla play 已知布局為如下： <div id="container"> <p>test</p> <div id="center"&

總結div裏面水平垂直居中的實現方法

上下左右代碼 ont ems ott ima ext align 定位　　最近經常碰到要垂直居中的問題，所以想著總結一下：關於如何設置小盒子在大盒子裏面水平垂直方向同時居中的實現方法有很多種，下面僅列舉了常用的幾種。　　首先看一下要實現的效果圖及對應的html代碼：

html+css，讓div水平垂直居中的幾種方式

在web前端開發中經常需要使用到讓div進行水平和垂直居中的技術,現在我們就來談談如何實現div水平垂直居中（如下圖所示） div元素在螢幕上水平垂直居中的三種方法 HTML中有個class為box的div元素，通過修改css樣式讓box元素在頁面水平垂直居中顯示

如何讓DIV水平和垂直居中三種方法

方法1 CSS實現水平和垂直居中要讓DIV水平和垂直居中，必需知道該DIV得寬度和高度，然後設定位置為絕對位置，距離頁面視窗左邊框和上邊框的距離設定為50%，這個50%就是指頁面視窗的寬度和高度的50%，最後將該DIV分別左移和上移，左移和上移的大小就是該D

如何讓div水平垂直居中

引子我們經常遇到需要把div中的內容進行水平和垂直居中。所以，這裡介紹一種方法，可以使div水平居中和垂直居中。程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta

scss : div水平垂直居中

top class 一個特性 scss 好用語言 div 編寫 scss 是一個很好用的css預處理語言，有很多很好的特性。比如 mixin。我們可以像使用函數那樣使用mixin。比如寫一個div水平垂直居中。上代碼。 @mixin absolut

css實現div水平垂直居中

　　中秋快到了，祝大家中秋快樂。　　平時大家寫bug過程中肯定會遇到讓div框水平或者垂直居中，然而有時候能居中，有時候不能居中。我把平時遇到的一些方法寫出來，如果對你有用，那便是晴天。　　1、text-align: center; text-align: center; 　　這個是最簡單的了，實現文

css垂直居中幾種方法（二）

play spa light dex bsp png ava ems pre 方法1：table-cell .box1{ display: table-cell; vertical-align: middle; text-a

css垂直居中七種方法

Margin:0 auto; 適用於塊狀元素具有寬高。不是用於文字居中。 text-align：center可實現文字居中，vertical-align垂直居中文字；可用於內聯元素的居中 text-align+line-height設定與height同大時，文字會水平垂直居中。

垂直居中四種方法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>垂直水平居中</title> </head> <style>

CSS垂直居中幾種方法

垂直居中佈局很常用到，自己總結下來以後用的話也很方便，算是對自己上網閱讀資料的一個考核 1.不知道自己高度和父容器高度的情況下, 利用絕對定位只需要以下三行： parentElement{ position:relative; } child

純CSS實現圖片水平垂直居中於DIV（圖片未知寬高）

分享分享圖片 gin pos pic ble 居中實現圖 class .demo{border:1px #ddd solid;width:267px;height:267px;overflow:hidden;text-align:center;display:tabl

已知/未知寬高的浮動元素水平垂直居中對齊

一、已知寬高的浮動元素水平垂直居中對齊效果：樣式CSS: <style> .parent{ position:relative; border:2px solid #0

CSS未知寬高的元素，水平垂直居中

方法一：使用定位思路：子元素絕對定位，距離頂部 50%，左邊50%，然後使用css3 transform:translate(-50%; -50%) 優點：高大上,可以在webkit核心的瀏覽器中使用缺點：不支援IE9以下不支援transform屬性 <style> .par

寬高均為百分比的DIV，水平垂直居中

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"

未知寬高div水平垂直居中3種方法

相關推薦