一、居中
1. 居中對齊元素
將塊元素水平居中對齊(像 <div>) , 使用 margin: auto;
設置元素的寬度將阻止它伸展到容器的邊緣。
然後元素將佔用指定的寬度，剩下的空間將平分在兩個邊距之間：
這個div是居中的。
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
注意：如果沒有設置寬度屬性，則居中對齊沒有效果 (或者設置到100%).
2. 居中對齊文本
將元素內部的文本居中, 使用text-align: center;
這些文本是居中的。
.center {
text-align: center;
border: 3px solid green;
}
3. 居中圖片
居中圖片, 使用 margin: auto; 並且設置爲塊級元素:
img {
display: block;
margin: auto;
width: 40%;
}
二、左右
HTML代碼：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>編程字典</title>
</head>
<body>
<h2>右對齊</h2>
<p>如何正確定位元素與位置屬性的一個例子:</p>
<div class="right">
<p>在我年輕而脆弱的歲月裏，父親給了我一些我一直以來一直在思考的建議.</p>
</div>
</body>
</html>
1. 左右對齊 - 使用 position
對齊元素的一種方法是使用 position: absolute;
在我年輕而脆弱的歲月裏，父親給了我一些我一直以來一直在思考的建議。
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
注意：
絕對定位元素從正常流中移除，並且可以重疊元素。
當使用 position對齊元素時, 總是定義 margin 和 padding 爲 <body> 元素. 這是爲了避免不同瀏覽器的視覺差異。
還有IE8和早期版本有一些問題, 當使用 position. 如果容器元素有一個指定的寬度 (例如：<div class="container">) , 並且沒有設置!DOCTYPE, IE8 和早期版本將添加 17px 外邊距到右邊. 這似乎是一條爲滾動條預留空間. 因此，總是聲明 !DOCTYPE 當使用 position時:
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
2. 左右對齊 - 使用 float
對齊元素的另一種方法是使用 float 屬性:
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
提示：
當將元素使用浮動對齊時，總是爲body元素定義邊距和填充。這是爲了避免不同瀏覽器的視覺差異。
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
效果圖：
三、垂直居中，水平居中
HTML代碼：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>編程字典</title>
</head>
<body>
<h2>居中</h2>
<p>在這個實例中,
我們使用定位和transform屬性實現元素的水平和垂直居中:</p>
<div class="center">
<!-- <p>我是垂直居中的.</p> -->
<p>我水平垂直居中.</p>
</div>
<p>注意: transform屬性不支持IE8和更早的版本.</p>
</body>
</html>
1. 使用 padding
有許多方法來中心垂直CSS元素. 一個簡單的解決方案是使用頂部和底部 padding:
.center {
padding: 70px 0;
border: 3px solid green;
}
水平和垂直居中, 使用 padding 和 text-align: center:
垂直居中
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
2. 使用 line-height
另一個技巧是使用 line-height 屬性值等於 height 屬性值.
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
3. 使用 position & transform
如果padding和line-height不可選，第三種解決方案是使用定位和變換屬性：
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
四、總結
本文基於Html基礎，主要介紹了Html中對齊的方式，對於對齊中的標籤做了詳細的講解，用豐富的案例 ，代碼效果圖的展示，幫助大家更好理解 。
最後，希望可以幫助大家更好的學習CSS3。