原來是設置自己要居中對齊，不是設置外面容器屬性
<!DOCTYPE html> <html> <head> <title> 居中對齊 </title> <style> .center { margin: auto; width: 60%; border: 3px solid #73AD21; padding: 10px; } </style> </head> <body> <div> <div class="center"> <p><b>注意: </b>使用 margin:auto 無法兼容 IE8, 除非 !DOCTYPE 已經聲明。</p> </div> </div> </body> </html>
注意: 如果沒有設置 width 屬性(或者設置 100%)，居中對齊將不起作用。
左右對齊 - 使用 float 方式
我們也可以使用 float 屬性來對齊元素:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> .right { float: right; width: 300px; border: 3px solid #73AD21; padding: 10px; } </style> </head> <body> <h2>右對齊</h2> <p>以下實例演示了使用 float 屬性來實現右對齊:</p> <div class="right"> <p>我老爹在小時候給我的一些人生建議，我現在還記憶深刻。</p> </div> </body> </html>
當像這樣對齊元素時，對 <body> 元素的外邊距和內邊距進行預定義是一個好主意。這樣可以避免在不同的瀏覽器中出現可見的差異。
注意：如果子元素的高度大於父元素，且子元素設置了浮動，那么子元素將溢出，這時候你可以使用 "clearfix(清除浮動)" 來解決該問題。
我們可以在父元素上添加 overflow: auto; 來解決子元素溢出的問題:
.clearfix {
overflow: auto;
}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> div { border: 3px solid #4CAF50; padding: 5px; } .img1 { float: right; } .clearfix { overflow: auto; } .img2 { float: right; } </style> </head> <body> <p>以下實例圖在父元素中溢出，很不美觀:</p> <div> <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170"> 菜鳥教程 - 學的不僅是技術，更是夢想！！！</div> <p style="clear:right">在父元素上通過添加 clearfix 類，並設置 overflow: auto; 來解決該問題:</p> <div class="clearfix"> <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170"> 菜鳥教程 - 學的不僅是技術，更是夢想！！！</div> </body> </html>
參考：https://www.runoob.com/try/try.php?filename=trycss_layout_clearfix
垂直居中對齊 - 使用 padding
CSS 中有很多方式可以實現垂直居中對齊。 一個簡單的方式就是頭部頂部使用 padding:
垂直居中 - 使用 line-height
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* 如果文本有多行，添加以下代碼: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
垂直居中 - 使用 position 和 transform
除了使用 padding 和 line-height 屬性外,我們還可以使用 transform 屬性來設置垂直居中:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> .center { height: 200px; position: relative; border: 3px solid green; } .center p { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </style> </head> <body> <h2>居中</h2> <p>以下實例中，我們使用了 positioning 和 transform 屬性來設置水平和垂直居中：</p> <div class="center"> <p>我是水平和垂直居中的。</p> </div> <p>注意: IE8 及更早版本不支持 transform 屬性。</p> </body> </html>
如何讓子元素居於父元素底部
如何讓子元素居於父元素底部？其實這是個很簡單的問題，只是父元素和子元素的css都需要修改一下：
.parent{ position: relative; width:200px; height: 100px; background: dodgerblue; } .content{ position: absolute; width: 200px; height: 30px; background: orange; bottom: 0; }
<div class="parent"> <div class="content"></div> </div>
上面的代碼我解釋一下，只要父元素的posiiton設置為relative，子元素的位置就是相對於父元素的，這樣設置子元素的bottom為0，即可將子元素置於父元素底部。
參考：https://www.runoob.com/css/css-align.html
https://www.cnblogs.com/chen-cong/p/8076442.html
https://blog.csdn.net/woshizhushiqiu/article/details/75269791