css中關於居中的那點事兒
關於居中，無論是水平居中，還是垂直居中都有很多方式，下面我來介紹一些常用的。
第一部分：水平居中
1.實現行內元素的居中。方法：在行內元素外面的塊元素的樣式中添加：text-align:center;
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> div{text-align: center;}
img{width: 200px;height: 200px;border: thin solid red;}
</style>
</head>
<body>
<div>
<img src="pic.png">
</div>
</body>
</html>
|
註意：對於某個塊元素的居中，不能在其父元素的樣式中設置text-align:center，這是無效的。下面介紹塊元素的居中方式。
2.實現塊級元素的水平居中。
方法一：設置其左右兩邊的外補丁為auto。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{width: 200px;height: 100px;background: red;margin:0 auto;}
</style>
</head>
<body>
<div>this is a div</div>
</body>
</html>
|
註意：如果塊級元素是body的直接子元素，不設置寬，則默認100%，看不出效果；不設置高，且div中沒有內容，則高度默認為0。因此，一定要同時設置塊級元素的寬和高，這樣才能看出來效果。對於在一個div中的另一個div希望居中，也可以使用這個方式，因為這時的margin是相對於其父元素而言的。
方法二：使用絕對定位和負邊距。
代碼如下所示：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{width: 500px;height: 300px;background: #ccc;margin: 0 auto;<strong>position:relative;</strong> }
#son{
width: 100px;height: 100px;background: #aaa;text-align: center;
<strong> position: absolute; left: 50%; margin-left: -50px;<br> /*註意：因為絕對定位是left的值是相對於son的最左邊為50%，所以需要使用margin-left再向左偏移寬度的一半 */<br></strong>
}
</style>
</head>
<body>
<div id="parent">
<div id="son">faas</div>
</div>
</body>
</html>
|
效果圖如下：
第二部分：垂直居中
1.行內元素的垂直居中
A 我們在寫導航菜單時，往往采用將<a>標簽寫入float的<li>中，且為了美觀，我們常常需要將a標簽中的內容水平居中和垂直居中。水平居中我們在上面已經介紹了，通過在字體的父元素內設置text-align:center;即可實現。那麽垂直居中呢？對於文字而言，我們只需要將行高設置為字體所在塊元素的高度即可。
html代碼如下：
| 1 2 3 4 5 6 7 8 9 |
<body>
<ul>
<li><a href="">我</a></li>
<li><a href="">是</a></li>
<li><a href="">導</a></li>
<li><a href="">航</a></li>
<li><a href="">的</a></li>
</ul>
</body>
|
css代碼如下：
| 1 2 3 4 5 |
<style>
*{padding: 0;margin: 0;list-style: none;text-decoration: none;}
ul li{float: left;/*width: 40px;height: 40px;*/}
a{display: block;width: 70px;height: 40px;background: #daa541;border:1px solid red;text-align: center;line-height: 40px;}
</style>
|
我把a標簽的display屬性值修改為了block，所以我們就可以修改a標簽的寬度和高度了，因為li是包含a的，li會由其中的內容（即a標簽）撐開，所以在li中的width和height是不需要設置的。
因為a成為了塊級元素，所以水平居中只需要在a中添加text-decoration:none;即可。將line-height的高度和height的高度設置為相同的，就可以實現垂直居中了。
B 如果要對a標簽中的字體居中，實際上還有一種更為簡單的方法。
即將a的display屬性設置位block之後，不設置其寬度和高度（li的寬度和高度也不設置），為了看清楚，我們可以給a加border，這時得到的效果圖如下：
即a的大小完全是由字體撐開的，這時我們可以通過設置上下左右的padding值達到與A方法相同的效果。html代碼與A中相同，css代碼如下：
| 1 2 3 |
*{padding: 0;margin: 0;list-style: none;text-decoration: none;}
ul li{float: left;}
a{display: block;background: #daa541;border:1px solid red; padding:10px 30px;}
|
大家可以看到，這裏我只設置了上下padding值為10px，左右padding值為30px;在A中的width height text-align(實現水平居中) line-height(實現豎直居中)這些屬性全都沒有設置，只使用了padding:10px 30px;來代替，所以這種方法是值得推薦的。
效果圖如下：
C 另外一種方法也可以實現行內元素的垂直居中。
代碼如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{width: 500px;height: 300px;background: #ccc; display:table-cell; vertical-align: middle;}
</style>
</head>
<body>
<div id="parent">
<span>faas</span>
</div>
</body>
</html>
|
即我們將id為parent的div元素的display屬性值設置位table-cell，這時，即讓標簽元素以表格單元格的形式呈現，類似於td標簽。這時就可以通過設置vertical-align來實現垂直居中了。但值得註意的是：table-cell會被其他一些css屬性破壞，比如float和position:absolute等等。且一旦設置位table-cell，這時margin就不能用了。這種方法也可以用於塊級元素的垂直居中。
2.塊級元素的垂直居中。
方法一：使用絕對定位和負邊距。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{width: 500px;height: 300px;background: #ccc;margin: 0 auto;<strong>position:relative</strong>; }
#son{
width: 100px;height: 100px;background: #aaa;text-align: center;
<strong> position: absolute;top: 50%;margin-top: -50px;</strong>
}
</style>
</head>
<body>
<div id="parent">
<div id="son">faas</div>
</div>
</body>
</html>
|
方法二：使用display：table-cell;方法。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{width: 500px;height: 300px;background: #ccc; display:table-cell; vertical-align: middle;}
</style>
</head>
<body>
<div id="parent">
<div>faas</div>
</div>
</body>
</html>
|
大家可以看出，這個方法與行內元素的垂直居中並沒有什麽區別。
方法三：使用display:flex;代碼如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{width: 500px;height: 300px;background: #ccc; margin:0 auto;
<strong> display: flex; align-items:center;</strong> }
#parent>div{background: red;width: 100px;height: 100px;}
</style>
</head>
<body>
<div id="parent">
<div>faas</div>
</div>
</body>
</html>
|
在父元素中添加display:flex;align-items:center;即可實現豎直居中。
3.使用line-height居中。
即給父元素（塊級元素）設置height和line-height相等，然後給子元素（inline-block 或者 inline元素) 設置vertical-align:middle即可，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>forMiddle</title>
<style>
div{
width: 500px;
height: 500px;
line-height: 500px;
background-color: #ddd;
}
a{
vertical-align: middle;
color:red;
}
</style>
</head>
<body>
<div>
<a href="">居中</a>
</div>
</body>
</html>
又如下所示：
<!DOCTYPE html>
<html>
<head>
<title>forMiddle</title>
<style>
div{
width: 500px;
height: 500px;
line-height: 500px;
background-color: #ddd;
}
img{
vertical-align: middle;
color:red;
}
</style>
</head>
<body>
<div>
<img src="http://p0.so.qhmsg.com/bdr/_240_/t018cfb77d38a88e67f.jpg" >
</div>
</body>
</html>
這種方式是非常值得學習了。
第三部分：水平豎直同時居中
方法一：使用絕對定位和負邊距
代碼如下
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{width: 500px;height: 300px;background: #ccc;margin: 0 auto;position:relative; }
#son{
width: 100px;height: 100px;background: #aaa;text-align: center;
position: absolute;top: 50%;margin-top: -50px; left: 50%;margin-left: -50px;
}
</style>
</head>
<body>
<div id="parent">
<div id="son">faas</div>
</div>
</body>
</html>
|
效果如下：
方法二：使用display：flex。
代碼如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{width: 500px;height: 300px;background: #ccc; margin:0 auto;
<strong> display: flex; align-items:center; justify-content:center;}</strong>
#parent>div{background: red;width: 100px;height: 100px;}
</style>
</head>
<body>
<div id="parent">
<div>faas</div>
</div>
</body>
</html>
|
即只需要在父元素的樣式中添加display：flex；align-items:center實現豎直居中，justify-content:center;實現水平居中。
方法三：同樣使用display:flex.
代碼如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{width: 500px;height: 300px;background: #ccc; margin:0 auto;
<strong>display: flex;</strong> }
#parent>div{background: red;width: 100px;height: 100px;<strong> margin: auto;</strong>}
</style>
</head>
<body>
<div id="parent">
<div>faas</div>
</div>
</body>
</html>
|
我們發現只需要在父元素中設置display:flex;在子元素中設置margin：auto；即可實現居中，這種方法無疑是最簡單的。
css中關於居中的那點事兒