htmlayout设计ui 基础篇：[20]button垂直对齐

1、第一，首先来看下，我们今天的问题1、下面的按钮区域，我们看到红线是垂直对齐的2、黑线是中间的按钮区域，很明显示，它垂直靠上面几个像素，没有垂直对齐

2、第二，我们来看下代码： <div .content-max style="border:#f00 1px solid;" ><button .button style="border:#000 1px solid;">确定</button> </div>了解下代码：外层的<div></div>就是那个红线的“块”级区域中间的<button></button>就是黑线的按钮区域

3、第三，在讲解决文案前，我们先来了解一下displaydisplay 属性规定元素应该生成的丸泸尺鸢框的类型displa烤恤鹇灭y：block;此元素将显示为块级元素，此元素前后会带有换行符。而且DIV就是默认是block块线元素～想一下：div垂直居中，而button不垂直居中，它们之间的区别？现在我们在：<style>button {display：block;}</style>现在我们再来看看效果：button也各div一样，垂直居中了～

4、第四，也就是说，我们只需要加一个样式：button {display：block;}就可以解决这个垂直居中对齐问题了～