CSS 水平垂直居中
塊級元素 水平垂直居中
<div class="wrap">
<div class="box">fdsa</div>
</div>
1.方法一
.wrap {
width: 800px;
height: 500px;
border: 1px solid blue;
position: relative;
}
.box {
width: 200px;
height: 100px;
background: orange;
position: absolute;
top : 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
2.方法二
.wrap {
width: 800px;
height: 500px;
border: 1px solid blue;
}
.box {
width: 200px;
height: 100px;
background: orange;
margin: 200px auto;
}
3.方法三
.wrap {
width: 800px;
height: 500px;
border : 1px solid blue;
position: relative;
}
.box {
width: 200px;
height: 100px;
background: orange;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
}
4.方法四
.wrap {
width: 800px;
height: 500px;
border: 1px solid blue;
display: flex ;
align-items: center;
}
.box {
width: 200px;
height: 100px;
background: orange;
margin: 0 auto;
}
5.方法五
.wrap {
width: 800px;
height: 500px;
border: 1px solid blue;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
.box {
width: 200px;
height: 100px;
background: orange;
}
行內元素 水平垂直居中
<div class="wrap">
kylin
</div>
1.方法一
.wrap {
width: 800px;
height: 500px;
border: 1px solid blue;
display: table-cell;
vertical-align: middle;
text-align: center;
}
2.方法二
.wrap {
width: 800px;
height: 500px;
border: 1px solid blue;
line-height: 500px;
text-align: center;
}
3.方法三
.wrap {
width: 800px;
height: 500px;
border: 1px solid blue;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
相關推薦
CSS水平垂直居中
水平居中 ron lac 表現 -a posit ble ive width 水平居中 HTML代碼: 1 <div class="parent"> 2 <div class="child"></div> 3 </div&
53.CSS---CSS水平垂直居中常見方法總結
out 嵌套 span 垂直 ems 寬度 分享圖片 .net tag CSS水平垂直居中常見方法總結 1、元素水平居中 當然最好使的是: margin: 0 auto; 居中不好使的原因: 1、元素沒有設置寬度,沒有寬度怎麽居中嘛! 2、設置了寬度依然不好使,
css水平垂直居中解決方法
css居中方案是一個老生常談的問題,主要包括水平居中和垂直居中,水平居中大家用的比較多,最常用的莫過於margin:0 auto方案了,而垂直居中,很多時候會讓很多新手頭疼。 常用居中方案(水平) margin:0 auto解決方案 (水平居中) 適用於已經知道寬度
HTML+CSS水平垂直居中
啦啦啦,好了,今天來分享自己的第一個知識點,難得自己還能想起來過來部落格園,寫寫部落格的。 好了,言歸正傳,今天分享關於html和css的一個簡單的知識點,對於大部分從事前端開發的人員來說可能都是很簡單的,但是,對於我這種患有嚴重健忘症的人還有一些初入前端的小夥伴來說,整理一下可能是有百利而無一害的
10種CSS水平垂直居中方法
10 種css 水平垂直居中方法 參考地址:https://mp.weixin.qq.com/s/uTnMr4lv_Hrlt2TH9A01gA (直接網上搜索到的地址,人家整理的比較好) 編寫該博文僅僅作為梳理,鞏固學習,加強記憶。 場景一:居中元素寬高已知
CSS水平垂直居中常見方法總結
說明:本篇文章只是總結一些方法,例子用到的各個元素屬性不做解釋,詳情請看MDN文件,非常的詳盡,例子在chrome瀏覽器下完全好使,IE這個渣渣 附上鍊接:https://developer.mozi
css水平垂直居中方法介紹
在專案中經常會碰到對元素進行垂直水平居中的需求,下面就來介紹一下不同場景可用的方法!一,水平居中方法1,text-align: center 對於inline 和 inline-block元素,可以對其父元素新增text-align: center樣式<div s
CSS 水平垂直居中
塊級元素 水平垂直居中 <div class="wrap"> <div class="box">fdsa</div> </div> 1.方法一 .wrap { width:
css 水平垂直居中 兩端對齊
單行垂直居中 單行垂直居中可以直接用line-height=width來做 <div style="width:100px;height:100px;line-height:100px;"><span>hello world</span>
HTML篇之CSS樣式——CSS水平垂直居中對齊(多種方式)
用CSS來實現元素的垂直居中效果是件苦差事,雖然說實現方法有多種,但有很多方式在某些瀏覽器下可能無法正常的工作。接下來我們就一起來看看這些不同方法實現垂直居中的各自優點和其不足之處。 方法一:這種方法用來實現單行垂直居中是相當的簡單的,你只要保證元素內容是單行,並且其高度是
CSS 水平垂直居中的幾種實現方法
ren parent frame right iframe 偏移 orm 結構 img 前言 項目中經常碰到需要實現水平垂直居中的樣式。下面就總結幾種常用的方法 水平對齊+行高 【思路一】text-align + line-height實現單行文本水平垂直居中 <st
[CSS]圖片、多行文本、多行文本與圖片的水平垂直居中
支持 clas ont body style back rgb 添加 vertica 圖片垂直居中:IE8+支持方法1.box { line-height:300px; text-align:center;}.box>img { vertical-a
盤點8種CSS實現垂直居中水平居中的絕對定位居中技術
其他 margin phone ie10 logs html mar over 防止 1.絕對定位居中(Absolute Centering)技術 我們經常用margin:0 auto;來實現水平居中,而一直認為margin:auto;不能實現垂直居中......實際上
CSS實現垂直居中水平居中
增加 position 大小 -a 添加 abs 100% 布局 table 1、絕對定位居中(子元素需設置寬高) > 原理:元素在過度受限情況下,將margin設置為auto,瀏覽器會重算margin的值,過度受限指的是同時設置top/bottom與height或
css布局--水平垂直居中
vertical log enter pla form items bsp spl css布局 1. 使用text-align 和 vertical-align 和 inline-block實現水平垂直居中 html <div class="parent">
純CSS實現圖片水平垂直居中於DIV(圖片未知寬高)
分享 分享圖片 gin pos pic ble 居中 實現圖 class .demo{border:1px #ddd solid;width:267px;height:267px;overflow:hidden;text-align:center;display:tabl
CSS篇之2---如何保持浮層水平垂直居中
img 才會 寬高 true 類型 webkit block clas lock 如何保持浮層水平垂直居中.notehttp://www.cnblogs.com/yaliu/p/5190957.html (一)利用絕對定位與transform
CSS元素水平垂直居中的方法
垂直 .com put ron spa blank span osi 絕對定位 1. 元素水平居中 1.1 設置父元素的屬性 text-align: center; 說明:此屬性只針對父元素的子元素為內聯元素時有效,比如:img,input,select,but
css中實現水平垂直居中的幾種方式
css水平垂直居中水平居中(1)使用inline-block+text-align<div class="parent"><div class="child">demo</div></div> .child {
CSS未知寬高元素水平垂直居中
use ali lan 並且 css3 優點 left 顯示設置 spl 思路:顯示設置父元素為:table,子元素為:cell-table,這樣就可以使用vertical-align: center,實現水平居中優點:父元素(parent)可以動態的改變高度(table元