国产 porn,妞干网这里只有精品,av噜噜在线观看

導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立...

網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。

在我們開發前端頁面的時候，為了讓頁面效果美觀，會出現需要垂直居中效果的地方。本章就讓我們來了解一下用css如何做到垂直居中，詳細介紹一下文字與div盒子的垂直居中的幾種方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

一：css如何做到讓文本文字垂直居中

1、line-height 使文字垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: #ddd;
			    line-height:300px;
			}
		</style>
	</head>
	<body>
		<div class="box">css 垂直居中了--文本文字</div>
	</body>
</html>

效果圖：

9.8.2.jpg

這樣就能讓div中的文字水平垂直居中了

2、CSS3的flex布局使文字垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: #ddd;
			    line-height:300px;
			     /*設置為伸縮容器*/
			    display: -webkit-box;
			    display: -moz-box;
			    display: -ms-flexbox;
			    display: -webkit-flex;
			    display: flex;
			    /*垂直居中*/
			    -webkit-box-align: center;/*舊版本*/
			    -moz-box-align: center;/*舊版本*/
			    -ms-flex-align: center;/*混合版本*/
			    -webkit-align-items: center;/*新版本*/
			    align-items: center;/*新版本*/
			}
		</style>
	</head>
	<body>
		<div class="box">css 垂直居中--文本文字（彈性布局）</div>
	</body>
</html>

效果圖：

9.8.2.jpg

二：css如何做到div盒子容器（塊狀元素）垂直居中

1.使用絕對定位和負外邊距對塊級元素進行垂直居中 (已知元素的高度)

如果我們知道元素的高度，可以這樣來實現垂直居中：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: #ddd;
			    position: relative;
			}
			.child{
				width: 150px;
			    height: 100px;
			    background: orange;
			    position: absolute;
			    top: 50%;
			    margin: -50px 0 0 0;
			    line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box">
		    <div class="child">css 垂直居中</div>
		</div>
	</body>
</html>

效果圖：

9.8.2.jpg

這個方法兼容性不錯，但是有一個小缺點：必須提前知道被居中塊級元素的尺寸，否則無法準確實現垂直居中。

2. 使用絕對定位和transform（未知元素高度）

如果我們不知道元素的高度，那么就需要先將元素定位到容器的中心位置，然后使用 transform 的 translate 屬性，將元素的中心和父容器的中心重合，從而實現垂直居中：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: #ddd;
			    position: relative;
			}
			.child{
				background: #93BC49;
			    position: absolute;
			    top: 50%;
			    transform: translate(0, -50%);
			}
		</style>
	</head>
	<body>
		<div class="box">
		    <div class="child">css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中</div>
		</div>
	</body>
</html>

效果圖：

9.8.2.jpg

這種方法有一個非常明顯的好處就是不必提前知道被居中元素的尺寸了，因為transform中translate偏移的百分比就是相對于元素自身的尺寸而言的。

3. 絕對定位結合margin: auto

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: #ddd;
			    position: relative;
			}
			.child{
				width: 200px;
                height: 100px;
				background: orange;
			    position: absolute;
			    top: 0;
			    bottom: 0;
			    margin: auto;
			    line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box">
		    <div class="child">css 垂直居中...</div>
		</div>
	</body>
</html>

效果圖：

9.8.2.jpg

這種方法需要先把要垂直居中的元素相對于父元素絕對定位，top和bottom設為相等的值，不管設置成多少值，只要兩者相等就行；然后再將要居中元素的margin設為auto，這樣便可以實現垂直居中了。被居中元素的寬高也可以不設置，但不設置的話就必須是圖片這種自身就包含尺寸的元素，否則無法實現。

4. 使用padding實現子元素的垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    background: #ddd;
			    padding: 100px 0;
			}
			.child{
				width: 200px;
                height: 100px;
				background: orange;
			    line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box">
		    <div class="child">css 垂直居中了</div>
		</div>
	</body>
</html>

效果圖：

9.8.2.jpg

這種實現方式非常簡單，就是給父元素設置相等的上下內邊距，則子元素自然是垂直居中的，當然這時候父元素是不能設置高度的，要讓它自動被填充起來，除非設置了一個正好等于上內邊距+子元素高度+下內邊距的值，否則無法精確的垂直居中。這種方式看似沒有什么技術含量，但其實在某些場景下也是非常好用的。

5. 使用flex布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: #ddd;
			    display: flex;
			    flex-direction: column;
			    justify-content: center;
			}
			.child{
				width: 300px;
			    height: 100px;
			    background: #08BC67;
			    line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box">
		    <div class="child">css 垂直居中了--彈性布局</div>
		</div>
	</body>
</html>

效果圖：

9.8.2.jpg

關于flex布局（彈性布局/伸縮布局）里門道頗多，這里先針對用到的東西簡單說一下：
flex也就是flexible，意為靈活的、柔韌的、易彎曲的。
元素可以通過設置display:flex;將其指定為flex布局的容器，指定好了容器之后再為其添加align-items屬性，該屬性定義項目在交叉軸（這里是縱向軸）上的對齊方式，可能的取值有五個，分別如下：
　　flex-start:：交叉軸的起點對齊；
　　flex-end：交叉軸的終點對齊；
　　center：交叉軸的中點對齊；
　　baseline：項目第一行文字的基線對齊；
　　stretch（該值是默認值）：如果項目沒有設置高度或者設為了auto，那么將占滿整個容器的高度。

以上就是css如何做到垂直居中？文字與div盒子的垂直居中的幾種方法（代碼實例）的詳細內容，更多請關注php中文網其它相關文章！

網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。

溫馨提示：喜歡本站的話，請收藏一下本站！

當前位置:雨林木風下載站 > 網頁設計教程 > 詳細頁面

css如何做到垂直居中？文字與div盒子的垂直居中的幾種方法（代碼案例）

本類教程下載

系統下載排行