整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
oundation 默認(rèn)設(shè)置
Foundation 使用瀏覽器默認(rèn)字體大小 (font-size:100%)。對(duì)于大多數(shù)桌面設(shè)備的瀏覽器來說，字體大小默認(rèn)為 16px。對(duì)于移動(dòng)設(shè)備的瀏覽器，字體默認(rèn)大小為 12px。 默認(rèn)的字體為 "Helvetica Neue"， line-height 默認(rèn)為 1.5。
這些設(shè)置是適用于 <body> 元素內(nèi)的元素。
此外， <p> 元素與底部的外邊距(margin-bottom) 為 1.25rem , line-height 為 1.6。
文本
以下的 HTML 元素，F(xiàn)oundation 設(shè)置了獨(dú)立的樣式渲染它，不會(huì)采用瀏覽器默認(rèn)樣式。點(diǎn)擊 "嘗試一下" 查看在線實(shí)例。
| 元素 | 描述 | 在線實(shí)例 |
|---|---|---|
| <h1> - <h6> | h1 - h6 標(biāo)題 | 嘗試一下 |
直居中
通用布局方式(內(nèi)斂元素和塊狀元素都適用)
利用flex:
核心代碼:
.container{
display:flex;
flex-direction:column;
justify:center
}
利用transformX(-50%):
核心代碼:
.container{
width: 300px;
height: 300px;
background: red;
position:relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
內(nèi)斂元素的垂直居中
單行內(nèi)斂元素:設(shè)置內(nèi)斂元素的高度和行高相等
核心代碼:
.container {
height: 120px;
line-height: 120px;
}
塊狀元素
固定元素高度的塊狀元素
核心代碼
.container{
position: relative;
}
.child{
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
未知高度的塊狀元素
當(dāng)垂直居中的元素的高度和寬度未知時(shí)，我們可以借助CSS3中的transform屬性向Y軸反向偏移50%的方法實(shí)現(xiàn)垂直居中。但是部分瀏覽器存在兼容性的問題。
核心代碼:
.container {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
水平居中
通用布局方式
flex布局
核心代碼：
.container{
display: flex;
justify-content: center;
}
absoulte+transform
核心代碼:
.container{
position:relative;
}
.child{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
內(nèi)斂元素水平居中
text-align:center
核心代碼:
.container{
text-align:center
}
塊狀元素水平居中
使用 margin:0 auto 必須注明子元素和父元素的寬度
核心代碼:
.container{
margin:0 auto
}
多塊狀元素：
利用內(nèi)斂元素布局方式container屬性為text-align:center;
核心代碼:
.container{
text-align: center;
}
.child{
display: inline-block;
}
水平垂直居中
固定寬高元素水平垂直居中
通過margin平移元素整體寬度的一半，使元素水平垂直居中。
核心代碼:
.container {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
未知寬高元素水平垂直居中
利用2D變換，在水平和垂直兩個(gè)方向都向反向平移寬高的一半，從而使元素水平垂直居中。
核心代碼：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
利用flex布局
利用flex布局，其中justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式；而align-items屬性定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對(duì)齊方式。
核心代碼：
.container {
display: flex;
justify-content: center;
align-items: center;
}
相對(duì)于 body 的水平垂直居中
列表布局(兼容性好)
核心代碼:
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
}
position 布局
核心代碼
.container{
position: absolute;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
我是一名前端開發(fā)程序員，自己整理了一份2019最全面前端學(xué)習(xí)資料，從最基礎(chǔ)的HTML+CSS+JS到移動(dòng)端HTML5到各種框架都有整理，送給每一位前端小伙伴，這里是小白聚集地，歡迎初學(xué)和進(jìn)階中的小伙伴
前端資料獲取方式：
1.在你手機(jī)的右上角有【關(guān)注】選項(xiàng)，點(diǎn)擊關(guān)注！
2.關(guān)注后，手機(jī)客戶端點(diǎn)擊我的主頁(yè)面，右上角有私信，請(qǐng)私信回復(fù)：【學(xué)習(xí)】
電腦已經(jīng)設(shè)置好了關(guān)鍵詞自動(dòng)回復(fù)，所以回復(fù)的時(shí)候請(qǐng)注意關(guān)鍵詞喲~
篇文章主要給大家介紹一下如何使用html+css實(shí)現(xiàn)元素的水平與垂直居中效果，這也是我們網(wǎng)頁(yè)在編碼制作中會(huì)經(jīng)常用到的問題。
主要實(shí)現(xiàn)css代碼：
水平居中：text-align:center;
垂直居中：line-height:XXpx; /*line-height與元素的height的值一致*/
我們先來看這樣一個(gè)例子，加入我們這里有一個(gè)div，寬度和高度為300px，背景顏色為黑色，然后在div中有一行簡(jiǎn)短文字，我們只需要使用line-height:200px;就可以實(shí)現(xiàn)文字的居中效果，具體的代碼如下所示：
由上圖可以看出我們實(shí)現(xiàn)了單行文字的垂直居中效果，但是很多時(shí)候我們的文字并不知道具體有多少，可能有一行，也可能有很多行，那么遇到多行文字的這種問題我們要如何處理呢。
對(duì)于多行文本的垂直居中我們有很多種實(shí)現(xiàn)方式，我們這里逐個(gè)的來看一下；
1、使用display:table來實(shí)現(xiàn)
主要實(shí)現(xiàn)代碼：
display: table使塊狀元素成為一個(gè)塊級(jí)表格;
display: table-cell;子元素設(shè)置成表格單元格;
vertical-align: middle;使表格內(nèi)容居中顯示，即可實(shí)現(xiàn)垂直居中的效果;
具體的html與css的代碼就如下所示：
2、使用absolute與transform配合實(shí)現(xiàn)
主要實(shí)現(xiàn)代碼：
position:absolute; 首先給文本絕對(duì)定位；
left:50%;top:50%;transform:translate(-50%,-50%); 讓文本距離盒子左邊和上邊分別為50%，再用transform向左（上）平移它自己寬度（高度）的50%，也就達(dá)到居中效果了。
具體的html與css的代碼就如下所示：
3、使用flex實(shí)現(xiàn)
主要實(shí)現(xiàn)代碼：
display: flex;設(shè)置 display 屬性的值為 flex 將其定義為彈性容器
align-items: center;定義項(xiàng)目在交叉軸（縱軸）上如何對(duì)齊，垂直對(duì)齊居中
justify-content: center; 定義了項(xiàng)目在主軸上的對(duì)齊方式，水平對(duì)齊居中
具體的html與css的代碼就如下所示：
好了，本篇文章就給大家說到這里，大家自己動(dòng)手寫一下看能不能寫出一樣的頁(yè)面效果出來，也可以找一些類似的頁(yè)面自己練習(xí)一下，有需要源碼的可以直接私信【網(wǎng)站源碼】即可。
每日金句：了解別人心里想什么，你才能得到自己想要的。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
