元素居中

元素水平居中

可以使用 margin: auto;

• 如果没有设置width属性(或者设置100%)，居中对齐将不起作用。

div {
    margin: auto;
    width: 1200px;
    height:36px;
    border: 3px solid green;
    padding: 10px;
}

文本居中对齐

text-align: center;

图片居中对齐

margin: auto;
并且放到块元素中

img {
    display: block;//转换为块级元素
    margin: auto;
    width: 40%;
}

也可以用center标签包起来

<center>
<img src="//static.runoob.com/images/mix/paris.jpg" alt="Paris" style="width:40%">
</center>

垂直居中

高度与行高一致

p{
height:36px;
line-height:36px;
}