div内容居中和布局居中样式总结

1.div的内容居中

（1）水平居中

<div align="center"><button>按钮></button></div>

CSS：

div{
    display: block;  // div默认为块级元素，如果是第三方控件或继承父类元素不是block，则需要指定（必要时提高优先级）
    text-align: center;
}

（2）垂直居中

设置line-height等于height即可（当line-height为百分比时是相对于字体而言）。

2.div的布局居中

div css网页布局居中的条件：

1、对body设置CSS内容居中样式text-align:center，代码：body{ text-align: center; }
2、对最外层布局对象设置margin:0 auto样式，代码：.div-container{ margin: 0 auto; }

如果父级元素不是内容居中的或者为宽度不固定元素，仅仅设置布局对象的左右margin为auto往往无效。