利用css樣式讓form表單底部居中
首先，我的html代碼如下，在form表單中有<textarea>和<input>標籤：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>底部居中</title>
</head>
<body>
<div class="zj_div">
<form id="zj_form">
<textarea rows="4" cols="60" name="text" id="zj_textarea"></textarea>
<br>
<input type="submit" value="Send out"/>
</form>
</div>
</body>
</html>原始的模樣如下
由圖可見，與頁面的頂部以及左邊都會有一些默認的邊距，爲了更好的達到居中的效果，我們先來清除這些默認的邊距；
在<head>標籤內添加內聯的的css，也就是添加<style>標籤；
首先先對全局標籤的默認樣式進行清除
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
</style>添加過後可見，此時是完全在視窗左上角的（爲了方便觀察我給它添加了一個背景色）；
下面就是開始改樣式來讓它底部居中了
首先，爲了避免不必要的麻煩，可以現在form表單外部添加一個<div>將其包裹起來，此處我給它定義的class=“zj_div”；
添加的css樣式如下；
.zj_div{
width: 100%;
text-align: center;
bottom: 0px;
position: fixed;
}效果圖如下
實現了底部居中
當然會發現其實將這四行代碼放在zj_form的樣式中也可以達到效果；但是這樣的話，<div>沒有高度
下面來解釋一下這四行代碼
width:100%;
寬度需要設置成100%，才能在使用後面的center時保證元素居中顯示；若不設置此屬性，默認會居左顯示；text-align:center;
設置元素的水平對其方式，值爲center時保證其居中對齊，此時<textarea>和<input>都會居中對齊；bottom:0px;
到其包含元素底部的距離爲0px，保證其在底部；position:fixed;
規定元素的定位類型，使其固定，此處就是固定在底部；總結
1、剛開始第一眼覺得，不就是個底部居中，自認爲很簡單，但是真正上手去做的時候，花了很久都沒有達到理想的效果；甚至添加了一大串的樣式，都不是真正意義上的固定底部居中；
2、在網上查找答案的時候，發現都不怎麼全面，是存在漏洞的，就想着自己去思考去解決問題；
3、後來達到效果後，再刪減冗餘的代碼，最終起作用的就是這四句了，以及前面爲了讓效果更完美對全局的設定；可以說是我認爲最簡單的方法了；