利用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>

原始的模样如下

html5表单form位置居中 form表单居中代码_form


由图可见，与页面的顶部以及左边都会有一些默认的边距，为了更好的达到居中的效果，我们先来清除这些默认的边距；

在<head>标签内添加内联的的css，也就是添加<style>标签；

首先先对全局标签的默认样式进行清除

<style type="text/css">
   *{
        margin: 0px;
        padding: 0px;
        }
</style>

添加过后可见，此时是完全在视窗左上角的（为了方便观察我给它添加了一个背景色）；

html5表单form位置居中 form表单居中代码_form_02

下面就是开始改样式来让它底部居中了
首先，为了避免不必要的麻烦，可以现在form表单外部添加一个<div>将其包裹起来，此处我给它定义的class=“zj_div”；
添加的css样式如下；

.zj_div{
        width: 100%;
        text-align: center;
        bottom: 0px;
        position: fixed;
    }

效果图如下

html5表单form位置居中 form表单居中代码_form_03

实现了底部居中
当然会发现其实将这四行代码放在zj_form的样式中也可以达到效果；但是这样的话，<div>没有高度

下面来解释一下这四行代码

width:100%;    
宽度需要设置成100%，才能在使用后面的center时保证元素居中显示；若不设置此属性，默认会居左显示；
text-align:center;
设置元素的水平对其方式，值为center时保证其居中对齐，此时<textarea>和<input>都会居中对齐；
bottom:0px;
到其包含元素底部的距离为0px，保证其在底部；
position:fixed;
规定元素的定位类型，使其固定，此处就是固定在底部；

总结

1、刚开始第一眼觉得，不就是个底部居中，自认为很简单，但是真正上手去做的时候，花了很久都没有达到理想的效果；甚至添加了一大串的样式，都不是真正意义上的固定底部居中；
2、在网上查找答案的时候，发现都不怎么全面，是存在漏洞的，就想着自己去思考去解决问题；
3、后来达到效果后，再删减冗余的代码，最终起作用的就是这四句了，以及前面为了让效果更完美对全局的设定；可以说是我认为最简单的方法了；