CSS水平居中和垂直居中
行內元素居中
水平居中
1.給父元素設定text-align:center
<div style="text-align: center">
<span>行內元素span居中</span>
</div>2.flex佈局
設定父元素display:flex;justify-content:center;
<div style="display:flex;justify-content:center;">
<span>行內元素span居中</span>
</div>垂直居中
1.父元素高度確定的單行文字(行內元素),可設定line-height等於父元素高度
<div style="height: 100px;">
<span style="line-height: 100px;">坦克</span>
</div>2.父元素高度確定的多行文字(行內元素)
方法一:使用插入 table (包括tbody、tr、td)標籤,同時設定 vertical-align：middle( td 標籤預設情況下就預設設定了 vertical-align 為 middle，所以我們不需要顯式地設定了。)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度確定的多行文字</title>
<style>
.wrap {
height: 300px;
background: #ccc
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td class="wrap">
<div>
<img src="" title="圖片"/>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>方法二:設定塊級元素的 display 為 table-cell（設定為表格單元顯示），啟用 vertical-align 屬性
<div class="container" style="display:table-cell;vertical-align:middle;">
<div>
<p>坦克</p>
<p>航母</p>
</div>
</div>塊級元素居中
水平居中
1.定寬塊狀元素,設定左右margin值為auto
<div style="width: 300px;margin: 20px auto;">
<p>坦克</p>
<p>航母</p>
</div>2.不定寬塊狀元素方法
方法一:加入table標籤,table標籤長度自適應性,即不定義其長度也不預設父元素body的長度(其長度根據其內文字長度決定),可以看做一個定寬的元素,然後利用定寬塊狀居中的margin方法,使其水平居中
<table style="margin: 20px auto;">
<tbody>
<tr>
<td>
<div>
<p>坦克</p>
<p>航母</p>
</div>
</td>
</tr>
</tbody>
</table>方法二:改變塊級元素的 display 為 inline型別(設定為行內元素顯示),然後使用text-align:center來實現居中效果
<head>
<meta charset="utf-8">
<title>不定寬塊狀元素水平居中</title>
<style>
.container {
text-align: center;
border: 1px solid red;
}
.container ul {
list-style: none;
display: inline;
}
.container li {
margin-right: 8px;
display: inline;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
</html>方法三:通過給父元素設定 float，然後給父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left: -50% 來實現水平居中。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定寬塊狀元素水平居中</title>
<style>
.container {
float: left;
position: relative;
left: 50%
}
.container ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: -50%;
}
.container li {
float: left;
display: inline;
margin-right: 8px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
</html>垂直居中
1.利用CSS屬性transform:translate(x,y)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
.container {
border:solid 1px red;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="container">
垂直居中
</div>
</body>
</html>2.利用flex佈局(不定高不定寬)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
.container {
height:300px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid #cc3f13;
}
</style>
</head>
<body>
<div class="container">
<div style="border:solid 2px green;width: 100px;height: 100px;">垂直居中</div>
</div>
</body>
</html>3.設定position:absolute或fiexed,另外margin設定為auto
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
.container{
width: 100px;
height: 100px;
border:solid 1px blue;
position: absolute;/*或fixed*/
/*上下居中*/
top:0;
bottom:0;
/*左右居中*/
left:0;
right:0;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<span>居中</span>
</div>
</body>
</html>