元素居中对齐:可以使用margin:auto;外边距设置 注意内边距padding设置无效。
注意这种必须设置width属性 设置为60%
文本居中对齐 可以使用text-align:center
图片居中对齐,使用margin:auto,并且是块元素,所以设置display为block
img { display: block; margin: auto; width: 40%; }
垂直居中的对齐 可以使内部元素对齐。.center { padding: 70px 0; border: 3px solid green; }
。 一个简单的方式就是头部顶部使用 padding:
70px 0表示上下都间隔border70px;左右为0
设置line-height和height属性相同,也可以设置成居中。只适用于单行文字. line-height是指一个行的高度.
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
.center p {
line-height: 3;
display: inline-block;
vertical-align:middle;
}
也可以使用display:table-cell 将div元素转换成table-cell的元素,随后可以使用vertical-align:middle 使内部元素垂直居中,使用text-align:center 使内部元素水平居中.
https://www.cnblogs.com/chen-cong/p/8076442.html
https://www.cnblogs.com/jiangwenli/p/4924172.html
有关的居中方法还需进一步的总结。