一码荔、 img的垂直水平居中
使用到的重要樣式屬性display,vertical-align
vertical-align:middle這個屬性是對table元素垂直居中起作用烂琴，如果想使用在img元素上倘感，就注意下面的display設(shè)置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.main{
width: 400px;
height: 400px;
background-color: #aaa;
display: table;/*父元素設(shè)置表格屬性*/
text-align: center;
}
.main span{
display: table-cell;/*img設(shè)置成表格元素屬性*/
vertical-align: middle;/*兩個display設(shè)置后這個屬性就起作用*/
}
</style>
</head>
<body>
<div class="main">
<span><img src="1.jpg" alt="/" width="150px"></span>
</div>
</body>
</html>
- 注意:display:table-cell浊吏，這是對類似文字元素起作用的,所以包含在span標簽內(nèi)
*對于文字居中也h1,span,p等類似文字標簽都可以這樣設(shè)置居中
二疾棵、 div的垂直水平居中
這種方法同樣適用于img,只需將child換成img就行菲宴，不再需要span了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.main{
width: 400px;
height: 400px;
background-color: #aaa;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: rgb(39,40,34);
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="main">
<div class="child"></div>
</div>
</body>
</html>
三物遇、簡便實現(xiàn)大部分元素的垂直居中
水平居中俩功，如果是文本(內(nèi)聯(lián)元素)text-align:center,div(塊級元素)margin:0 auto;,绍傲，所以我就不寫水平居中了扔傅，別嫌我懶哦
- 會使用到屬性display:flex和align-items
- 我大概說一下，display:flex,將對象作為彈性伸縮盒顯示
- align-items:定義flex子項在flex容器的當前行的側(cè)軸（縱軸）方向上的對齊方式烫饼。
.main{/*給父容器設(shè)置*/
display:flex;
align-items:center;/*所有子元素都垂直居中了*/
}
四猎塞、使用css3 屬性transform
transform: translateY(50%);/*給子元素設(shè)置*/
- transform: translateX(50%)也可以水平居中，但是上面已經(jīng)說了杠纵，可以使用margin: 0 auot(塊級),text-align(內(nèi)聯(lián))荠耽，水平垂直居中transform: translateX(50%) translateY(50%);
上面的所有垂直居中優(yōu)點:是根本不需要知道父元素和子元素的尺寸,那下來下面的方法需要知道尺寸，但是不是不好比藻，有的地方使用可能會很方便铝量，看你項目中的情況
五倘屹、單行文本的垂直居中
- 設(shè)置文字的line-height==父元素的height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.block{
height: 80px;
background-color: blue;
line-height: 80px;/*值與父元素高度相等*/
text-align: center;
}
</style>
</head>
<body>
<div class="block">單行文本垂直居中</div>
</body>
</html>
六、需要知道子元素的尺寸
- 實現(xiàn) 水平與垂直居中
/*省略了尺寸的設(shè)置款违，側(cè)重了重點唐瀑，讀者可以把部分內(nèi)容加上*/
.main{/*父元素*/
position: relative;
}
.child{/*子元素*/
position: absolute;
top: 50%;
left: 50%;
margin-left: /*負的自身寬度一半*/
margin-top: /*負的自身高度一半*/
}
七、總結(jié)
以上的六種方法的兼容性我沒有一一測試插爹，如果讀者有好的意見哄辣，希望您提出來，謝謝
文章一： 個人搭建翻墻服務(wù)器
